Title
화면·섹션 제목. 의미 단계와 시각 크기를 따로 정함.
- 출시 화면에서 사용
개요
미리보기
지난주 기록
예시
상태
h1
지난주 기록
h2 의미 · h3 크기
지난주 기록
초점 대상
지난주 기록
가장 긴 문구 (es)
연결한 출처에서 다시 찾은 지난주 기록
쓰임 예
h1
지난주 기록
h2
지난주 기록
h3
지난주 기록
h4
지난주 기록
h5
지난주 기록
h6
지난주 기록
이렇게 · 이렇게 하지 않기
- 이렇게 한 화면에 h1은 하나다. 제목은 내용이 무엇인지 말하고 결과를 약속하지 않는다(“모두 찾았어요” 금지). 슬로건을 제목 자리에 두지 않는다.
- 이렇게 의미는 order, 크기는 size로 정한다. 시각 위계 때문에 문서 계층을 바꾸지 않는다.
- 이렇게 제목은 2줄까지. 넘치면 문장을 줄인다.
- 이렇게 하지 않기 한 페이지에 h1을 둘 이상 두지 않는다.
- 이렇게 하지 않기 제목을 말줄임하지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
order? | 1 | 2 | 3 | 4 | 5 | 6 | 2 | 문서 계층(h{order}). 페이지마다 h1은 하나, 단계를 건너뛰지 않는다. |
size? | 1 | 2 | 3 | 4 | 5 | 6 | 2 | 보이는 크기. 생략하면 order와 같은 단계. 카드 제목은 order={3} size={4}처럼 쓴다. |
focusTarget? | boolean | false | 프로그래밍 초점 대상(상세 h1, 목록 제목). tabIndex=-1과 보이는 초점 링. |
children | ReactNode | 지난주 기록 | 제목 텍스트. |
ref | — | — | ref는 heading 요소로 전달된다. 상세가 열릴 때 ref.current.focus()로 초점을 옮긴다. |
| 그 밖의 속성 | — | — | id, lang, dir, aria-* 등 네이티브 heading 속성은 그대로 전달된다. tabIndex는 focusTarget으로만 정한다. className·style은 받지 않는다. |
접근성
키보드: 보통은 비대화형. focusTarget이면 스크립트로만 초점을 받고 Tab 순서에는 들어가지 않는다.
- focusTarget 제목은 :focus에서 링을 그린다. 포인터로 연 상세에서도 초점 위치가 보인다.
- scroll-margin-top으로 sticky 헤더 아래에 가려지지 않는다(2.4.11).