DTD (Document Type Declaration)
DTD, Document Type Declaration은 문서 형식에 관한 선언이다. 모든 HTML 문서는 이 선언으로 시작한다.
<!DOCTYPE html>이 선언은 '태그 tag'라기 보다는, 브라우저에게 예상되는 문서 유형에 대한 정보를 주는 것이다. 즉, 브라우저가 HTML5 (최신 웹 표준) 버전에 맞게 렌더링하도록 선언하는 것이다. 그럼, DOCTYPE이 무엇이냐?! Document Type 의 줄임말(?) 즉, 문서 형식을 나타낸다. <!DOCTYPE html>을 선언하면 브라우저에게 '이 문서는 html 형식이니까, HTML5 버전으로 렌더링해줘~'하고 알려주는 것이다.
Document Structure 문서 구조
HTML 문서의 기본 구조는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>위 코드의 태그를 하나씩 살펴보자,
<html>
HTML 문서의 최상단(루트) 요소를 나타내며 'root tag'라고도 부른다. 모든 다른 요소들은 <html> 요소의 후손이어야 한다. 즉, doctype 선언 후, 처음과 마지막에 오는 태그는 <html>이어야 한다. 또한 <html>의 자식 요소로는 <head>와 <body> 태그만 쓸 수 있다.
<head>
문서가 사용할 제목(title), 스크립트(scripts), 스타일시트(style sheets)와 같은 문서 정보(metadata)가 포함된다.
<body>
HTML 문서의 내용을 나타내며, 한 문서에는 하나의 <body> 요소만 있어야 한다.
자식 요소와 관련해 추가적으로 정리하자면, 부모와 자식 요소, 조상과 자손 요소 그리고 형제 요소라는 게 있다. 이 개념은 특히 CSS에서 '선택자 조합(combinators)' 뿐만 아니라 요소의 배치나 정렬을 스타일링 할 경우 반드시 알아야 하는 기본 개념이다.
부모와 자식 요소
부모 요소는 해당 요소를 포함하는 가장 가까운 상위 요소를 말하고, 반대로 자식 요소는 해당 요소가 포함하는 직계 하위 요소를 말한다. 직계 하위 요소라는 것은, 부모 요소의 바로 밑에 있는 요소를 가리킨다.
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>제목</h1>
<p>내용</p>
</body>
</html>위 구조와 같은 코드의 경우, <html> 요소의 자식 요소는 <head>와 <body>이다. <head> 요소 안의 <title> 요소와 <body> 요소 안의 <h1>, <p> 요소는 각각 <head>와 <body>의 자식 요소이지, <html>의 자식 요소는 아니다. 부모 요소는 여러 개의 자식 요소를 가질 수 있지만, 자식 요소는 하나의 부모 요소만 가진다.
조상과 자손 요소
조상 요소는 해당 요소를 포함하고 있는 모든 상위 요소를 말하고, 반대로 자손 요소는 해당 요소가 포함하고 있는 모든 하위 요소를 말한다. 다시 위 코드를 보면, <html>의 자손 요소는 <html>이 포함하고 있는 <head>, <body>, <title>, <h1>, <p> 모든 요소들이다. <head>와 <body> 요소는 <html>의 직계 자식 요소이지만, 자식 또한 자손이라고 할 수 있으니 자손 요소라고도 볼 수 있다. 반대로 <html>은 <head>와 <body>의 부모 요소이면서 조상 요소가 되고, 나머지 <title>, <h1>, <p> 같은 요소도 <html>이라는 같은 조상 요소를 가진다.
형제 요소
형제 요소는 같은 부모를 가지고 있는 요소들을 말한다. 위 코드에서는, <head>와 <body> 그리고 <h1>과 <p> 요소가 각각 형제 요소가 된다.
'Frontend Developer > HTML' 카테고리의 다른 글
| [HTML] 앵커 태그로 하이퍼링크 만들기 ( <a> ) (0) | 2021.02.06 |
|---|---|
| [HTML] 강조, 인용, 출처 태그 ( <em>, <strong>, <blockquote>, <q>, <cite> ) (0) | 2021.02.06 |
| [HTML] 제목, 문단, 컨테이너 태그 ( <h1>, <p>, <div>, <span> ) (0) | 2021.02.05 |
| [HTML] <head> 태그와 <body> 태그 채우기 ( <title>, <link>, <style>, <meta>, <script> ) (0) | 2021.02.04 |
| HTML이란? HTML의 기본, 태그! (0) | 2021.02.02 |
댓글