패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
Outline
- 개요, 윤곽
- 간결하게 추려 낸 주요 내용
- 웹 문서의 개요는 헤딩과 섹션으로 형성
Outline Keyword
- Heading
- SECTIONING
- 명시적/암시적 섹션
- 어색한 섹션
Title vs Heading
<title>
- 문서의 제목
- 문서에서 한 번만 사용 가능
<h*>
- 섹션의 제목
- 문서에서 여러 번 사용 가능
Heading
- 문서 개요를 형성하는 기본(==필수) 아이템
- 웹 브라우저와 화면낭독기에 문서 개요를 드러내는 기본적인 방법
- heading 태그는 문서의 골격을 설명하는 가장 중요한 태그이므로 생략하지 않도록 주의
- "헤딩 없이 개요(목차) 없다"
SECTIONING ROOT
*명세에는 구현되어 있으나, 브라우저 제조사가 오랜시간 HTML5 아웃라인 알고리즘을 구현하지 않았기 때문에 실무에 사용하는 것을 권장하지 않음
<body>
<blockquote>
<details>
<dialog>
<figure>
<fieldset>
<td>- HTML5에서 새롭게 추가된 명세
- 독립적인 개요를 생성하는 개요 컨테이너
- 섹셔닝 루트 외부에서 내부 개요에 접근 불가
<h1>A</h1>
<h2>B</h2>
<blockquote>
<h3>C</h3>
* HTML5 명세 의도
Depth가 A > B 로 출력 (blockquote 내부 접근 불가)
*브라우저/화면낭독기
Depth가 A > B > C 로 출력- 문맥 아닌 콘텐츠를 전체 개요에서 격리하는 역할
Sectioning Content
-
개요의 범위를 명시적으로 지정하는 역할
-
Sectioning Tag 종류
<article>: 기사, 본문, 맥락. 독릭접으로 배포 가능<aside>: 페이지의 주요 내용이 아닌 부수적인 내용 (ex.배너, 연관 콘텐츠)<nav>: 사이트의 주된 탐색 메뉴<section>: 주제별로 나누거나 묶는 역할
-
HTML5에서 새롭게 추가된 명세
-
명시적 개요를 생성하는 개요 컨테이너
-
Sectioning Tag가 없으면 암시적 개요 형성
-
적절한 수준의 헤딩을 자식 요소로 사용해야 함
Sectioning Tag
<article>vs<section>
주제별로 묶인 콘텐츠라는 점에서는 동일하지만, article 태그는 독립적으로 사용하더라도 하나의 완결된 형태의 콘텐츠로 간주할 수 있을 때 사용
<h1>A</h1>
<article>
<h1>B</h1>
<section>
<h1>C</h1>
</section>
</article>
* HTML5 명세 의도
Depth가 A > B > C 로 출력 (blockquote 내부 접근 불가)
*브라우저/화면낭독기
Depth가 A, B, C 로 출력Check Point
"섹셔닝 요소를 적극 사용하되 아웃라인 알고리즘(섹셔닝 루트, 헤딩 수준 자동 보정) 명세에는 의존하지 말 것"
명시적 세션
- 헤딩과 함께 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션
예제)
<h1>A</h1>
<article>
<h2>B</h2>
<section>
<h3>C</h3>
</section>
</article>암시적 세션
- 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하지 않고, 헤딩만을 사용하여 암시적으로 개요가 생성된 섹션
예제)
<h1>A</h1>
<h2>B</h2>
<h3>C</h3>어색한 섹션
- 최상위 헤딩이 없는 경우
예제)
<body>
<p>A</p>
<article>
<h2>B</h2>
</article>
</body>
*h1 요소가 없이 h2 요소 바로 작성- 헤딩 없이 Sectioning Content을 사용한 경우
예제)
<article>
<p>A</p>
<section>
<p>B</p>
</section>
</article>Summary
- 헤딩을 사용하고 헤딩과 섹션(article, aside, nav, section)을 1:1로 매핑
- HTML5 개요 알고리즘(섹셔닝 루트, 헤딩 수준 자동 보정)에 의존하지 않도록 주의
Frontend Developer