#01 HTML 기본 구조
2022. 1. 13. 00:43ㆍHTML
HTML이란?
- Hyper Text Markup Language의 약자로 웹 문서를 만들기 위해 사용되는 기본 언어이다.
- 여러 가지 요소로 구성되며, HTML 요소들은 웹 문서의 구조를 설명한다.
- HTML 문서는 대문자와 소문자를 구분하지 않는다. (소문자 권장)
HTML 기본 문법
- 요소(element) : HTML 문서를 이루는 구성 요소
- 시작 태그(start tag), 내용(contents), 종료 태그(end tag)로 정의한다.
- 요소는 다른 요소를 포함할 수 있으며 상위 요소를 부모 요소라고 하고, 하위 요소를 자식 요소라고 한다.
- 콘텐츠와 종료 태그가 없는 빈 요소(empty element)도 있다. ex) <br>, <img> 등
- 속성(attribute) : 요소를 설명하기 위한 옵션 정보
- 속성 이름(attribute Name), 구분 문자(delimiter), 속성 값(attribute value)으로 정의한다.
- 모든 HTML 요소는 속성을 가질 수 있다.
- HTML 속성은 항상 시작 태그에 지정한다.
HTML 4대 요소
- <html> : 문서가 HTML로 작성되었다는 것을 의미하며, 문서의 시작과 종료를 나타낸다.
- <head> : 문서의 메타데이터 집합으로, 메타데이터는 웹페이지에 직접적으로 보이지 않는 정보를 의미한다.
- <title> : 문서의 제목을 표시한다.
- <body> : 사용자에게 전달할 실제 내용으로 웹 페이지에 표시되는 부분이다.
<!DOCTYPE html>
- 현재 문서가 html5로 작성되었다는 것을 나타낸다.
- 모든 HTML 문서는 버전 정보를 나타내는 <!DOCTYPE> 선언으로 시작해야 한다.
HTML 주석
- 실제로 표현되지 않고 코드에만 보이는 글
- 코드를 더 쉽게 이해할 수 있게 내용을 메모하는 목적으로 사용되며, 협업에 유용하게 사용된다.
- 문서 내 어디에든 위치할 수 있다.
<!-- 내용 -->일반적인 웹 문서 구조
- <header> : 웹 문서 맨 윗부분에 위치하며 웹사이트 이름, 로고, 글로벌 내비게이션 등으로 구성된 영역
- <nav> : 다른 웹 페이지로 이동할 수 있는 링크를 별도로 모아둔 영역
- <main> : 문서의 주요 내용을 담고 있는 본문 영역
- <aside> : 본문의 왼쪽 또는 오른쪽에 위치하며 본문 영역과 관련 있는 요소로 구성된 영역
- <footer> : 웹 문서 맨 아래쪽에 위치하며 저작권, 연락처, 사이트맵 등으로 구성된 영역
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 제목 </title>
</head>
<body>
<!-- HTML 기본 구조 -->
<header> 헤더 영역 </header>
<nav> 내비게이션 영역 </nav>
<main>
본문 영역
</main>
<aside> 사이드바 영역 </aside>
<footer> 푸터 영역 </footer>
</body>
</html>반응형
'HTML' 카테고리의 다른 글
| #06 HTML 서식 요소 (0) | 2022.01.14 |
|---|---|
| #05 HTML 영역 분할 요소 (0) | 2022.01.14 |
| #04 HTML 목록 요소 (0) | 2022.01.13 |
| #03 HTML 제목 및 단락 요소 (0) | 2022.01.13 |
| #02 HTML 메타데이터 요소 (0) | 2022.01.13 |