머리글 및 바닥글 영역
머리글 및 바닥글 영역은 머리글과 바닥글 두 요소를 사용하여 정의할 수 있습니다. head 요소는 머리글 영역을 정의하는 데 사용됩니다. 반드시 전체 페이지의 헤더일 필요는 없습니다. 헤드를 사용하여 섹션 및 글과 같은 다른 요소의 헤더 영역을 표시할 수도 있습니다.
주의: 문서 제목, 스타일시트 및 JavaScript 호출이 포함된 HTML 문서의 헤더 영역을 정의하는 데 사용되는 익숙한 head 요소와 head를 혼동하지 마세요.
전체 문서에서 header의 사용은 다음과 같습니다.
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
섹션 요소에 적용하면 다음과 같은 이미지가 생성됩니다:
<section> <header> <h1> 웹 앱 만들기(09부): jQuery 모바일(1)</h1> <p> jQuery는 의심할 여지 없이 가장 잘 알려진 JavaScript 프레임워크 중 하나입니다.</p> </header> <p> 그 결과 jQuery는 이미 "클래식" 웹사이트에서 수천 번 사용되고 있습니다. 자매 프레임워크인 jQuery 모바일(jQM)은 웹 앱에서 사용하도록 특별히 설계되었습니다. 이 프레임워크를 사용하면 웹 앱을 순식간에 실제 앱처럼 보이게 만들 수 있습니다. jQM을 자세히 살펴봐야 하는 충분한 이유입니다. </p> <footer> <p>저작권: PSD-Tutorials.de</p> </footer> </section>
어떤 경우든 바닥글과 머리글에 추가 머리글 및 바닥글 요소가 포함되어 있지 않은지 확인하세요.
머리글 그룹화
제목은 섹션과 관련하여 중요한 역할을 합니다. 이러한 제목은 처음에는 고전적인 요소인 h1~h6이 될 수 있습니다. 그러나 HTML5에서는 hgroup 요소도 허용됩니다. 이러한 hgroup 요소는 차례로 여러 개의 제목을 포함할 수 있습니다.
먼저 hx 요소를 사용하여 "일반적인" 구조가 정의된 고전적인 HTML 문서를 살펴보겠습니다.
<h1> 책 </h1> <h2> 1장 </h2> <h2> 2장 </h2> <h3> 2.1장 </h3> <h3> 2.2장 </h3> <h2> 3장 </h2>
이 정의는 다음과 같은 구조를 의미합니다:
책 1장 2장 2장 2.1장 2.2장 2.2장 3장
그러나 제목은 브라우저에서 들여쓰기가 되지 않습니다.
H그룹은 저널리즘 텍스트와 관련하여 특히 흥미롭습니다. 이는 종종 본문과 머리글 또는 부제목으로 구성된 두 부분으로 구성된 제목으로 구성됩니다. 예시를 통해 이러한 측면을 설명할 수 있습니다.
<hgroup> <h1>클라우드 OS</h1> <h2>운영체제로서의 웹</h2> </hgroup> <p>이것이 기사의 내용이 시작되는 부분입니다...</p>
이 예는 서브라인이 문서 내에서 별도의 섹션을 소개하는 것이 아님을 분명히 보여줍니다. 오히려 기사 제목의 일부입니다. 이와 같은 내용은 hgroup 요소를 사용하여 요약할 수 있습니다.
h1~h6 요소는 hgroup 내에서 허용됩니다.
개요 개념
아웃라인 개념은 HTML5에서도 사용되며, 섹션 요소와 다양한 hx 요소의 상호 작용을 포함합니다. 이 개념을 사용하면 제목은 이전과 마찬가지로 h1~h6 요소에 따라 여러 수준으로 나뉩니다. 여기서 h1은 최상위 레벨에 해당하고 h6은 최하위 레벨을 나타냅니다. 따라서 이전과 비교했을 때 달라진 점은 없습니다. 이제 섹션 요소 내에서 hx 요소를 정의할 수 있기 때문입니다. 그리고 계산은 매번 새로 시작되지만 항상 한 단계 낮게 시작됩니다.
HTML5 사양에서 개요 개념은 상당히 복잡해 보이지만 그 이면의 아이디어는 매우 간단합니다. 실제로 문서 구조를 기계가 읽을 수 있게 만드는 콘텐츠 사양을 정의하는 데 사용할 수 있습니다.
다음은 또 다른 예시입니다:
<h1> Chapter 1 </h1> <section> <h1> Chapter 2 </h1> <section> <h1> Chapter 3 </h1> </section> </section>
HTML5의 개요 개념은 다음과 같은 구조를 갖습니다:
1. 챕터 1
- Chapter 2
- Chapter 3
- Chapter 3
다른 예시를 통해 그 효과를 설명합니다. 여기에서도 소스 문서부터 시작합니다.
<섹션> <h1>설치 및 구성</h1> <섹션> <h2>설치</h2> <p>설치에 관한 모든 것 </section> <section> <h2>구성</h2> <p>여기서 구성에 대한 모든 것을 찾을 수 있습니다 </section> <aside> <p>주제에 대한 흥미로운 책들.... </aside> </section> <footer> <p>(c) by PSD-Tutorials.de </footer> </section>
결과 구조는 다음과 같습니다:
1. 섹션(설치 및 구성) 1.1 섹션(설치) 1.2 섹션(구성) 1.3 섹션(따로)
- 섹션(푸터)
또 다른 예시입니다:
<body> <h1>설치 및 구성</h1> <h2>설치</h2> <p>테마에 대한 모든 것 설치 ...더 많은 내용... <section> <h3>전제 조건</h3> <p>테마에 대한 모든 것 설치 전제 조건 ....더 많은 내용... <h3>준비</h3> <p>주제에 대한 모든 것 준비 ...더 많은 내용... <h2>구성</h2> <p>주제에 대한 모든 것 구성 ...더 많은 내용... </section> </body>
결과 구조는 다음과 같습니다:
1. 설치 및 구성 1.1 설치 1.1.1 전제 조건 1.1.2 준비 1.2 구성
내부 카운트는 매번 1부터 시작합니다. 이 요소들만 개요 개념의 영향을 받습니다:
- 기사
- aside
- nav
- 섹션머리글과 바닥글 두 요소는 영향을 받지 않습니다.
개요 개념은 아직 브라우저에서 지원되지 않는다는 점에 유의하세요.
그러나 브라우저 제조업체가 이에 대한 조치를 취하는 것은 시간 문제일 뿐입니다. 아웃라인 개념의 장점은 너무도 큽니다. 예를 들어 자동으로 생성되는 탐색 모음을 생각해 보세요. 하지만 현재 브라우저가 이러한 방식의 구조화를 무시하더라도 지금이라도 문서를 논리적으로 구조화해야 합니다. 이렇게 하면 웹사이트의 미래에도 어느 정도 대비할 수 있습니다.
