Posts 견고한 UI 설계를 위한 마크업 가이드 - HTML 개요 알고리즘 이해
견고한 UI 설계를 위한 마크업 가이드 - HTML 개요 알고리즘 이해
Cancel

견고한 UI 설계를 위한 마크업 가이드 - HTML 개요 알고리즘 이해

강의를 봅시다.


Outline

웹 문서의 개요는 헤딩과 섹션으로 구별된다.

웹 브라우저에서 Chrome HeadingMap Extension을 이용하면 해당 브라우저가
헤딩이 얼마나 잘 구성되어 있는지 확인할 수 있다.


OutLine의 4가지 키워드

  • 헤딩
  • 섹셔닝
  • 명시적/암시적 섹션
  • 어색한 섹션

Title vs Heading

Title은 문서에서 한 번만 사용할 수 있다.

Heading은 문서에서 여러 번 사용할 수 있다.


Heading

문서 개요를 형성하는 기본(필수) 아이템
웹 브라우저와 화면낭독기에 문서 개요를 드러내는 방법

헤딩이 없으면 문서의 개요도 없게 된다.


Sectioning Content

HTML5에서 새롭게 추가된 명세로, 명시적 개요를 생성하는 개요 컨테이너다.
적절한 수준의 헤딩을 자식 요소로 사용해야 함.

  • article / 기사, 본문, 맥락 독립적으로 배포 가능
  • aside / 페이지의 주요 내용이 아닌
  • nav / 사이트의 주된 메뉴 탐색
  • section / 주제별로 나누거나 묶는

마크업을 할 때는 h1, h2, h3를 순차적으로 사용하는 것이 좋다.

예시)
h1
article
h2
section
h3


명시적 섹선

헤딩과 함께 섹셔닝 콘텐츠(article, aside, nav, section)를 사용하여 섹션의 범위를 명시적으로 알 수 있는 섹션

암시적 섹션

섹셔닝 콘텐츠(article, aside, nav, section)를 사용하지 않고 헤딩만을 사용하여 암시적으로 개요가 생성된 섹션

명시적 섹션 예시)
h1
article
h2
section
h3

암시적 섹션 예시)

h1
h2
h3

명시적 섹션을 이용하자

어색한 섹션

최상위 헤딩이 없는 곳.


요약

  1. 헤딩을 사용하고 헤딩과 섹션을 1:1로 맵핑하기
  2. HTML5 개요 알고리즘에 의존하지 않기

느낀점

지금까지 section, nav, footer와 같은 태그를 사용해 본 적이 없다.
그냥 모두 div로 묶어서 사용했는데,
이제는 의미를 알고 있으니
한 번 헤딩 태그와 섹션 태그를 적절하게 사용해보는 연습을 하면 좋을 것 같다.

이런 것도 몰랐다니.
매우 기초적인 내용이지만 매우 중요했다.


This post is licensed under CC BY 4.0 by the author.

React-router 복습하기

견고한 UI 설계를 위한 마크업 가이드 - 웹은 덩어리, 구성요소, 변형의 반복

Comments powered by Disqus.