Section Heading System

KRDS Gap-layout을 자동으로 준수하는 섹션 헤딩 시스템입니다. 헤딩 간 간격, 헤딩-본문 간격을 CSS 인접 선택자를 통해 자동으로 관리합니다.

개요

Section Heading System은 KRDS Gap-layout 명세를 자동으로 준수하도록 설계된 섹션 구조 시스템입니다.

  • 자동 CSS 주입: 컴포넌트 import 시 필요한 CSS가 자동으로 주입됩니다.
  • 자동 간격 관리: CSS 인접 선택자를 통해 헤딩 간 간격을 자동으로 적용합니다.
  • 시맨틱 구조: Section, Subsection으로 명확한 문서 계층 구조를 표현합니다.
  • KRDS 준수: 공식 KRDS Gap-layout 명세(헤딩 간 간격, 헤딩-본문 간격)를 100% 준수합니다.

설치

사용법

Section Heading System을 import하여 사용합니다. CSS는 컴포넌트 import 시 자동으로 주입됩니다.

예제

컴포넌트 구성

Section Heading System은 다음 컴포넌트들로 구성됩니다:

Heading

헤딩과 설명을 포함하는 헤더 컴포넌트입니다. title과 description prop을 통해 사용하거나, children을 통해 커스텀 콘텐츠를 제공할 수 있습니다.

Section

h2 또는 h3 레벨의 주요 섹션을 감싸는 컨테이너입니다. CSS 인접 선택자를 통해 섹션 간 간격이 자동으로 조정됩니다.

Subsection

h3 또는 h4 레벨의 하위 섹션을 감싸는 컨테이너입니다. Subsection 간 40px 간격이 자동으로 적용됩니다.

기본 사용법

title과 description prop을 사용한 가장 간단한 형태입니다:

커스텀 설명 콘텐츠

children을 통해 설명 영역을 자유롭게 커스터마이징할 수 있습니다:

복잡한 구조

h1부터 시작하여 Section, Subsection을 중첩한 복잡한 문서 구조를 표현할 수 있습니다:

KRDS Gap-layout 명세

Section Heading System은 다음 KRDS 간격 명세를 자동으로 적용합니다:

헤딩 간 간격 (Heading-to-Heading)

h1 → h2:

48px

h2 → h3:

40px

h3 → h4:

24px

h4 → h5:

16px

헤딩-본문 간격 (Title-Body Gap)

h1 → body:

24px (title-body-large)

h2 → body:

20px (title-body-medium)

h3 → body:

20px (title-body-medium)

h4 → body:

20px (title-body-medium)

h5 → body:

16px (title-body-small)

래퍼 간 간격 (Wrapper Spacing)

Section ↔ Section:

32px (모바일) / 48px (PC)

Subsection ↔ Subsection:

40px

접근성

Section Heading System은 웹 접근성을 자동으로 보장합니다.

  • 시맨틱 HTML: 모든 헤딩은 올바른 시맨틱 HTML 요소(h1, h2, h3, h4, h5)를 사용합니다.
  • 명확한 문서 구조: Section, Subsection 등의 wrapper 컴포넌트는 명확한 문서 계층 구조를 제공하여 스크린 리더가 페이지 구조를 정확히 파악할 수 있습니다.
  • 앵커 링크: 자동 생성된 ID를 통해 페이지 내 네비게이션이 가능하며, 키보드 사용자가 특정 섹션으로 빠르게 이동할 수 있습니다.
  • 올바른 헤딩 순서: h1 → h2 → h3 순서를 준수하여 스크린 리더 사용자가 문서 구조를 쉽게 탐색할 수 있습니다.
  • CSS 인접 선택자를 통한 자동 간격 관리로 일관된 시각적 계층 구조를 제공합니다.