Wrap
공간이 부족할 때 자동으로 줄바꿈되는 flexbox 레이아웃 컴포넌트입니다. 태그 목록, 버튼 그룹, 카드 배열 등에 적합합니다.
개요
Wrap은 요소들에 간격을 추가하고 공간이 부족할 때 자동으로 줄바꿈하는 레이아웃 컴포넌트입니다.
Item 1
Item 2
Item 3
Item 4
Item 5
설치
사용법
Wrap 컴포넌트를 import하고 gap prop으로 간격을 설정합니다.
예제
간격 조절 (Gap)
gap prop으로 요소 간 간격을 조절합니다. none, xs, sm, md(기본값), lg, xl, 2xl을 제공합니다.
작은 간격 (sm - 8px)
Item 1
Item 2
Item 3
큰 간격 (md - 16px)
Item 1
Item 2
Item 3
큰 간격 (lg - 24px)
Item 1
Item 2
Item 3
정렬 (Align & Justify)
align으로 교차축 정렬, justify로 주축 정렬을 설정합니다.
가운데 정렬
Center 1
Center 2
Center 3
균등 분배 (between)
Start
Middle
End
실제 사용 예시
태그 목록과 버튼 그룹에 Wrap을 적용한 예시입니다.
태그 목록
ReactTypeScriptTailwindNext.js
버튼 그룹
접근성
WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- 시맨틱 마크업: 의미론적으로 중립적인
<div>요소 사용 - 반응형 레이아웃: 화면 크기에 관계없이 모든 아이템이 접근 가능
- 키보드 네비게이션: 내부 요소들의 Tab 순서가 자연스럽게 유지
- 내부 요소 접근성: Wrap 자체는 레이아웃만 담당, 내부 요소의 접근성은 개별적으로 처리