HTML(HyperText Markup Language)
HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어이다. 텍스트, 이미지, 링크, 비디오 등 다양한 요소를 포함할 수 있으며 웹 브라우저는 HTML을 해석하여 사용자가 볼 수 있는 웹 페이지를 렌더링한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
기본 사용방법
- HTML 문서는 보통 <html> 태그로 시작하고 </html> 태그로 끝난다.
- <head> 섹션에는 페이지의 메타데이터(예: 제목, 스타일 시트, 스크립트 등)가 들어간다.
- <body> 섹션에는 실제 페이지에 표시될 콘텐츠가 포함된다.
기본 HTML 태그들
- <h1> ~ <h6>: 제목(헤더) 태그
- <p>: 문단을 나타내는 태그
- <a href="URL">: 하이퍼링크를 생성하는 태그
- <img src="이미지 URL" alt="대체 텍스트">: 이미지를 삽입하는 태그
- <div>: 블록 레벨의 구획을 나누는 태그
- <span>: 인라인 레벨의 구획을 나누는 태그
CSS (Cascading Style Sheets)
CSS는 HTML 요소의 스타일을 정의하는 스타일 시트 언어이다. 웹 페이지의 레이아웃, 색상, 폰트 등을 제어하여 시각적 스타일을 정한다.
기본 사용방법
CSS는 <style> 태그 내에 직접 작성하거나, 별도의 .css 파일로 작성하여 HTML 문서에 <link> 태그로 연결한다.
기본 문법과 속성들
- 선택자(selector): 스타일을 적용할 HTML 요소를 선택한다. 예: p { color: blue; }
- 속성(property)과 값(value): 스타일을 지정합니다. 예: color, font-size, margin, padding, border
- 클래스(.classname)와 아이디(#id): HTML 요소를 그룹화하거나 개별적으로 스타일링한다.
JavaScript (JS)
JavaScript는 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어이다. 웹 페이지의 상호작용을 담당한다.
기본 사용방법
JS 코드는 <script> 태그 내에 작성되거나, 별도의 .js 파일로 작성하여 HTML 문서에 <script src="파일 경로"></script>로 포함한다.
기본 문법과 함수들
- 변수 선언: var, let, const를 사용하여 변수를 선언한다
- 함수: 특정 작업을 수행하는 코드 블록으로, function 키워드로 선언한다
- 이벤트 처리: HTML 요소에서 발생하는 이벤트(예: 클릭, 마우스 이동 등)에 대한 반응을 정의한다. 예: element.addEventListener('click', function(){})
- DOM 조작: JavaScript를 사용하여 HTML 문서의 구조를 수정할 수 있다.
이 세 가지 기술을 결합하여 웹 페이지를 만들고, 시각적으로 꾸미고, 사용자의 상호작용에 반응하는 동적 기능을 추가할 수 있다.
'KnockOn Bootcamp' 카테고리의 다른 글
| [2주차 TIL] KnockOn Bootcamp(Javascript) (1) | 2024.08.10 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp(HTML) (0) | 2024.08.08 |
| [1주차 TIL] KnockOn Bootcamp(프록시,Proxy,VPN) (0) | 2024.08.06 |
| [1주차 TIL] KnockOn Bootcamp(패킷-Packet) (0) | 2024.08.06 |
| [1주차 TIL] KnockOn Bootcamp(쿠키-Cookie,세션-Session,JWT) (0) | 2024.08.06 |