[HTML5] 3.문서 개요
outline
문서 전체가 어떠한 내용으로 구성되어 있는지 한눈에 파악할 수 있는 것이 문서의 개요입니다.
HTML5에서도 이러한 문서의 개요를 나타낼 수 있는 새로운 개념이 추가되었으며,
이러한 개요를 ‘outline’ 이라고도 합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서개요</title>
</head>
<body>
<h1>반응형 웹</h1>
<h2>HTML5 마크업</h2>
<p>마크업 방법</p>
<h2>CSS3</h2>
<p>CSS3 디자인 방법</p>
</body>
</html>
위의 구조에서 HTML5에서는 눈에 보이지 않는 ‘섹션’들이 생성되는데,
여기서 섹션은 ‘컨텐츠 구역’ 정도로 이해하면 됩니다.
<section>, <article>, <nav>, <aside> 와 같은 요소는 '섹셔닝 컨텐츠'
<body> 요소와 같은 것을 섹셔닝 루트
섹션은 이러한 섹셔닝 컨텐츠 요소들에 의해 명시적으로 만들어지기도 하고,
제목 요소에 의해 암시적으로 만들어지기도 합니다.
이런 것을 컨텐츠 모델이라고 합니다.
컨텐츠의 종류에는 ‘플로우 컨텐츠’,’섹셔닝 컨텐츠’, ‘임베디드 컨텐츠’ 등이 있는데,
섹셔닝 컨텐츠는 제목과 푸터의 범위를 정의하는 컨텐츠 구역 요소들이며,
플로우 켄텐츠는 문서의 body 내에서 사용되는 모든 요소를 의미합니다.
또, 임베디드 컨텐츠는 외부의 동영상이나 오디오, 이미지 등을 문서 내부로 삽입하는 요소들(video, audio, img 등)입니다.
위의 예제에서 <h1> 요소는 <body> 섹션의 제목이 되고,
두 개의 <h2> 요소는 그 아래 <p> 요소를 포함하는 각각의 암시적 섹션들이 생성됩니다.
이렇게 되면 <h1> 요소가 <h2> 요소들의 어미가 되는 outline이 만들어집니다.
HTML 5 Outliner 을 이용하면 제작된 문서의 개요를 쉽게 알 수 있습니다.
다음 예제를 보시죠!
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>header요소</title>
</head>
<body>
<h1>반응형 웹</h1>
<h2>프로젝트를 통해 배워 보기</h2>
<section>
<h3>HTML5 마크업</h3>
<p>마크업 방법1</p>
<p>마크업 방법2</p>
</section>
<section>
<h3>CSS3</h3>
<p>CSS3 디자인 방법1</p>
<p>CSS3 디자인 방법2</p>
</section>
</body>
</html>
아까 사이트에서 outline 구조를 봐보면 다음과 같습니다.
결과를 보면 예상과는 다릅니다.
1. 반응형 웹
1.프로젝트를 통해 배워 보기
1.HTML5 마크업
2.CSS3
라고 나올 줄 알았으나~ 그렇지 않습니다.
<body> 요소 안의 <h2> 요소와 <section> 요소 안의 <h3> 요소의 제목 레벨이 같은 것을 알 수 있습니다.
이는 섹션 요소 안에 있는 최상위 제목 요소는 가장 인접한 상위 섹션 요소 안의 최상위의 제목 요소보다
한 단계 낮은 제목 요소로 ouline이 만들어지기 때문입니다.
여기서 말하는 섹션은 <section> 요소가 아닌, 일반적인 컨텐츠 구역을 의미합니다.
예제에서 <section>요소와 가장 인접한 상위 섹션은 <body>이고,
<body> 섹션의 최상위 제목 요소는 <h1>이기에,
<section>요소 안에 <h3>은 <body> 섹션의 최상위 제목 요소인 <h1>보다
한 단계 낮은 <h2>요소로 개요가 출력된 것입니다.
지금까지 html을 이용하여 문서개요(outline)를 만드는 방법에 대해 알아봤는데요~
html 문서를 마크업 했을 때의 결과와 outline은 명백히 다르다는 것을 주의하시길바랍니다!
outline은 문서 개요일 뿐입니다!(실제 웹 페이지 화면과 다름)
html을 이용하여 outline을 만들 수 있다는 것만 가볍게 알아두시길 바랍니다!
배움은 의무도 생존도 아니다