HTML문서 계층 구조는 구조를 중시하는 트리구조와 아웃라인과 컨텐츠 구성을 중시하는 두가지로 나누어 볼수 있습니다.
구조를 중시하는 트리구조
<body>
<div>
<ul>
<li></li>
</ul>
<img>
</div>
<nav>
</nav>
</body>
위의 코드와 같은 구조를 가진 문서가 있다고 가정합시다. 쉽게 설명하기 위해 다른 코드는 생략하였습니다.
박씨 집안의 시조가 박혁거세이듯이 <head> 부분을 제외하고 이 문서에 있는 모든 태그들의 시조는 <body>입니다.
<body> 요소는 문서의 모든 요소들을 담고 있습니다. 말을 만들자면 시조태그인 셈입니다.
<div>는 <body> 요소의 자식태그입니다. 반대로 <div>에게 <body>태그는 부모태그입니다.
한 계층 차이가 나기 때문입니다. 그러면 이 예시에서 <div>와 <li>의 관계는 어떻게 될까요?
<div>에게 <li>요소는 손자태그입니다. 반대로 <li>에게 <div>요소는 할아버지 뻘이 됩니다.
아웃라인과 콘텐츠 구성을 중시하는 구조
이미 HTML 페이지를 마크업해 온 사람들은 익숙하겠지만, 방금 설명한 것은 가장 기본적인 트리 형태의 구조입니다.
물론 HTML5에서도 이런 단순 트리 형태의 구조를 사용할 수 있지만 추가된 개념이 있습니다.
기존에는 문서하나에 H1 헤더 하나가 붙고, 각 하위 콘텐츠 별로 H2 태그가 붙는 탑다운 방식으로 문서 하나를 완성했습니다.
그러나 HTML5 문서는 각 섹션이 별도의 H1 태그를 가져도 무방합니다. 박스별 콘텐츠들은 독립된 하나의 문서가 될 수 있습니다.
여러 문서가 합해져 하나의 HTML파일이 된다고 생각하면 이해하기가 쉬울까요?
또한, 기존에는 <div> 이용해서 레이아웃을 구성했습니다. 헤더에 해당하는 부분은 <div class="header"></div>,
푸터에 해당하는 부분은 <div class= "footer"></div>, 이런식으로 많이 사용했습니다.
HTML5에서는 이런 부분들을 조금 더 세분화하여 <header> 태그가 추가되었고, <footer> 태그가 추가 되었습니다.
이밖에도 많은 구성요소들이 추가되어 아웃라인을 살린 마크업 페이지를 만들 수 있게 되었습니다.
HTML5에서는 구조보다는 컨텐츠의 '구성'이 더 중요해졌습니다.
<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
| # CSS의 특수 선택자 (0) | 2012.09.19 |
|---|---|
| # HTML문서에 CSS를 적용하는 세가지 방법 (0) | 2012.09.18 |
| #콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 (0) | 2012.08.27 |
| #HTML5의 새로운 요소(hgroup,article,section) (0) | 2012.08.27 |
| #CSS3 배경지식 쌓기 (0) | 2012.08.25 |
