Heading

KRDS 타이포그래피 시스템을 따르는 페이지 및 섹션 제목 컴포넌트입니다. 시맨틱 HTML(h1-h5)을 사용하여 접근성을 보장하고, 자동 ID 생성으로 TOC 링크를 지원합니다.

개요

h1 - 페이지 제목

h2 - 주요 섹션

h3 - 하위 섹션

h4 - 세부 항목

h5 - 작은 제목

설치

사용법

예제

레벨별 크기

h1부터 h5까지 5단계의 제목 레벨을 제공합니다. h1-h3는 PC와 모바일에서 크기가 다르게 적용되며, h4-h5는 고정 크기를 사용합니다.

h1 - Extra Large

40px (PC) / 28px (Mobile)

h2 - Large

32px (PC) / 24px (Mobile)

h3 - Medium

24px (PC) / 22px (Mobile)

h4 - Small

19px

h5 - Extra Small

17px

페이지 구조

계층적으로 제목을 사용하여 명확한 페이지 구조를 만듭니다. 시맨틱한 HTML 태그를 사용하여 스크린 리더 사용자도 콘텐츠 구조를 쉽게 파악할 수 있습니다.

페이지 제목

주요 섹션

하위 섹션

세부 항목

자동 ID 생성

children 텍스트에서 자동으로 URL-friendly ID를 생성하여 TOC(Table of Contents) 링크를 지원합니다. 커스텀 ID를 지정할 수도 있습니다.

API 레퍼런스

자동 생성 ID: "api-레퍼런스"

커스텀 스타일

className prop으로 추가 스타일을 적용할 수 있습니다.

브랜드 컬러 제목

대안 컴포넌트

다음 상황에서는 Heading 대신 다른 타이포그래피 컴포넌트를 사용하세요:

  • 배너나 히어로 섹션: Display 컴포넌트 사용
  • 본문 텍스트: Body 컴포넌트 사용
  • 폼 라벨: Label 컴포넌트 사용
  • 네비게이션 메뉴: NavigationMenu, MegaMenu 컴포넌트 사용

접근성

  • 시맨틱 HTML: h1-h5 태그를 사용하여 스크린 리더를 지원합니다
  • 명확한 계층: 명확한 계층 구조로 콘텐츠 탐색이 용이합니다
  • 단일 h1: 페이지당 h1은 하나만 사용하여 주제를 명확히 합니다
  • 순차적 레벨: 순차적 레벨 사용으로 문서 구조 이해가 개선됩니다 (h2 다음 h4는 지양)
  • 자동 ID: 자동 ID 생성으로 TOC 링크를 지원합니다
  • 명도 대비: 4.5:1 이상의 명도 대비로 가독성을 보장합니다 (WCAG 2.1 / KWCAG 2.2 Level AA)