Learn HTML & CSS문서 구조와 아웃라인
페이지는 그저 요소들을 쌓아놓은 무더기가 아닙니다. 위에서 아래로 읽어보면 하나로 짜여 있어야 합니다. 제목이 있고, 그 아래 각각 자기 헤딩을 가진 섹션들이 있고, 그것들이 죽 훑어 내려가기에 자연스러운 순서로 놓여 있어야 하죠. 이 짜임을 페이지의 아웃라인이라 부르며, 두 가지가 함께 만들어냅니다. 헤딩은 각 부분에 이름을 붙이고, 시맨틱 HTML 챕터에서 다룬 랜드마크 영역인 <header>, <nav>, <main>, <aside>, <footer>는 그 부분들을 묶어 영역으로 나눕니다. 이번 챕터에서는 이 둘이 어떻게 결합해 페이지 전체를 이루는지 살펴봅니다.
헤딩과 랜드마크가 아웃라인을 만드는 방식
웹 페이지는 책의 페이지를 읽듯 위에서 아래로 읽습니다. 방문자는 맨 위에서 시작해 아래로 내려가므로, 콘텐츠를 배치한 순서가 곧 방문자가 읽는 순서입니다. 사람들이 실제로 만나고 싶어할 순서대로 내용을 배치하세요.
이 순서에 형태를 부여하는 것이 바로 헤딩입니다. 헤딩은 뒤이어 나오는 부분에 붙이는 짧은 이름표로, <h1>부터 <h6>까지의 태그로 작성합니다. <h1>은 페이지 전체의 제목입니다. 각 <h2>는 그 아래의 주요 섹션에 이름을 붙이고, <h3>은 <h2> 안의 더 작은 부분에 이름을 붙입니다. 이것들을 쌓아 올리면 페이지의 **아웃라인**이 만들어집니다. 페이지 순서를 그대로 비추는 목차인 셈이죠.
<h1>초보자를 위한 사워도우</h1>
<h2>필요한 것</h2>
<h3>재료</h3>
<h3>장비</h3>
<h2>스타터 만들기</h2>헤딩만 따로 읽어도 페이지가 무엇에 관한 것이고 어떻게 구성되어 있는지, 본문 단락 하나 읽지 않고도 알 수 있습니다.
<h1>부터 <h6>까지의 헤딩은 뼈대입니다. <h1>이 페이지 제목이고 나머지는 모두 그 안에 중첩됩니다. 헤딩만 읽어도 페이지가 어떻게 짜여 있는지 알 수 있어야 합니다. main은 하나, 헤딩 순서는 올바르게
두 가지 습관이 아웃라인을 깨끗하게 유지해줍니다. 첫째, 페이지에는 <h1>을 하나만 두세요. 그것은 페이지의 제목이고, 책 표지에 이름이 하나뿐인 것처럼 페이지도 제목이 하나입니다. 나머지는 모두 <h2> 이하입니다.
둘째, 레벨을 건너뛰지 마세요. <h2> 다음 단계는 <h3>이지, <h5>가 아닙니다. 레벨을 건너뛰면 아웃라인에 구멍이 생기는데, 이는 목차에 1장 다음 바로 4장이 나오는 것과 같습니다. 한 번에 한 레벨씩 내려가고 올라가세요.
<h1>평일 저녁 식단</h1>
<h2>파스타</h2>
<h3>토마토 바질</h3>
<h3>갈릭 버터</h3>
<h2>샐러드</h2>
<h3>그릭 샐러드</h3>이 헤딩들이 담고 있는 내용은 보통 하나의 <main> 영역 안에 들어갑니다. <main>은 페이지의 핵심 콘텐츠, 즉 이 페이지에만 있고 여러 페이지가 공유하는 헤더나 내비게이션, 푸터가 아닌 부분을 표시합니다. <h1>이 하나뿐인 것처럼 <main>도 하나뿐입니다.
<h1>은 하나, 페이지에는 제목이 하나뿐이니까요. 헤딩 레벨은 한 단계씩 내려가세요, <h2> 다음 <h3>, <h5>로 건너뛰지 말고요. 그리고 페이지의 본문은 <main> 하나에 담으세요. 헤딩이 원하는 크기가 아니라면 그건 CSS가 할 일이지, 레벨을 바꿀 이유는 아닙니다. 콘텐츠 묶기와 순서 정하기
관련된 콘텐츠는 묶어놓으면 더 잘 읽힙니다. 이를 위한 요소가 두 가지 있습니다. <section>은 자기 헤딩을 가진 주제별 묶음으로, 레시피의 "재료" 부분 같은 것입니다. <article>은 따로 떼어내도 그 자체로 의미가 통하는 독립된 조각으로, 블로그 글 한 편이나 고객 리뷰 하나 같은 것입니다.
<article>
<h2>천천히 발효한 포카치아</h2>
<p>거의 반죽할 필요가 없는 빵입니다.</p>
</article>순서는 묶기만큼이나 중요합니다. 페이지는 위에서 아래로 읽히므로, 가장 중요한 콘텐츠를 위쪽에 배치하고 나머지는 독자가 원할 순서로 배치하세요. 레시피는 필요한 재료를 단계보다 먼저 나열하는데, 그것이 실제로 따라 할 때의 순서이기 때문입니다.
<section>을, 하나의 글처럼 독립적으로 존재하는 조각에는 <article>을 써서 관련 콘텐츠를 묶으세요. 그다음 순서를 신경 쓰세요. 페이지는 위에서 아래로 읽히니 중요한 것은 위쪽에 두세요. 사람들이 실제로 읽고 싶어할 순서대로 작성하세요. 흔한 구조적 실수들
몇 가지 구조적 실수가 계속해서 반복되는데, 각각 깔끔한 해결책이 있습니다.
- 헤딩 태그로 글자를 크게 만들기. 원하는 크기로 보이도록
<h3>을 쓰면 아웃라인이 깨집니다. 레벨은 의미에 따라 고르고, 크기는 CSS에서 지정하세요. - 헤딩 레벨 건너뛰기.
<h2>에서<h4>로 건너뛰면 아웃라인에 구멍이 생깁니다. 한 번에 한 레벨씩 내려가세요. <h1>을 두 개 이상 쓰기. 페이지에는 제목이 하나뿐입니다.<h1>태그가 여러 개면 목차가 헷갈립니다.- 헤딩을 전혀 쓰지 않기. 아무것도 끊어주지 않고 길게 이어지는 단락들은 훑어 읽기 어렵습니다. 독자가 길을 찾을 수 있도록 헤딩을 추가하세요.
이것들을 고치면 눈으로 훑어보든 소리로 들려주든 누구에게나 페이지가 명확하게 읽힙니다. 모든 방문자를 위해 페이지를 제대로 만드는 방법은 접근성 챕터에서 더 자세히 다룹니다.
<h1>을 두 번째로 추가하지 말 것, 그리고 긴 페이지에 헤딩을 전혀 두지 않은 채 방치하지 말 것. 하나하나가 아웃라인을 헷갈리게 만듭니다. 헤딩 레벨은 의미로 고르고 크기는 CSS가 처리하게 하세요.