List

항목을 세로 목록으로 표시하는 리스트 컴포넌트입니다. 불릿·번호 유형과 인터랙티브 항목을 지원합니다.

기본

list_title · list_meta · list_desc로 항목 내용을 구성합니다.

홍길동프론트엔드 개발자
김철수백엔드 개발자
이영희UI/UX 디자이너

불릿

class에 list_bullet을 적용합니다. list_bullet-circle · list_bullet-square로 마커 형태를 바꿀 수 있습니다.

디자인 토큰 정의
컴포넌트 문서화
접근성 검토

불릿 · 본문

title · description prop으로 제목·설명을 함께 표시합니다.

HTML 마크업시맨틱 태그와 ARIA 속성을 사용합니다.
SCSS 스타일OOCSS 패턴으로 구조와 스킨을 분리합니다.
접근성WCAG 2.2 AA 기준을 준수합니다.

불릿 변형

circle · square 마커와 중첩 목록을 지원합니다.

원형 마커 항목 A
원형 마커 항목 B

사각 마커 항목 A
사각 마커 항목 B

레이아웃
- Container
- Grid
기본 요소
- Button
- Typography

번호

tag="ol"과 list_ordered 클래스로 순서 목록을 만듭니다.

요구사항 분석
와이어프레임 작성
프로토타입 검증
개발 및 배포

번호 변형

list_ordered-alpha · list_ordered-roman · list_ordered-upper-alpha · list_ordered-upper-roman으로 번호 형식을 변경합니다.

첫 번째 옵션
두 번째 옵션
세 번째 옵션

서론
본론
결론

항목 A
항목 B

Chapter I
Chapter II

프로젝트 설정저장소 클론 및 의존성 설치
1. 터미널에서 프로젝트 폴더 이동
2. pnpm install 실행
3. pnpm dev 실행
빌드pnpm build로 .output/ 출력

번호 · 계층

list_ordered-outline(1.1) · list_ordered-dash(1-1)은 뎁스마다 번호가 이어집니다. list_ordered-depth는 뎁스별로 1 → a → i 형식이 자동 전환됩니다.

1단계 — 요구사항 정의
설계
1. 정보 구조
2. UI 설계
  1. 와이어프레임
  2. 프로토타입
개발 및 배포

1단계 — 환경 구성
개발
1. 컴포넌트 구현
2. 문서화
  1. API 표
  2. 데모 예제
QA 및 릴리스

레이아웃
기본 요소
1. Button
2. Form
  1. Input
  2. Select
피드백

불릿 · 링크

불릿 목록에서도 li 안에 a.list_link를 사용합니다.

테두리

bordered prop으로 각 항목에 테두리를 적용합니다.

알림 설정이메일 및 푸시 알림을 관리합니다.
프로필 편집이름, 사진, 소개를 변경합니다.
보안비밀번호 및 2단계 인증을 설정합니다.

링크

페이지 이동이 필요한 항목은 a.list_link를 배치합니다. split prop으로 항목 구분선을 적용합니다.

버튼

같은 페이지 내 액션은 button.list_link를 사용합니다. button 안에는 phrasing content만 넣고, 본문 영역은 span.list_content로 감쌉니다.

카드 혼합

list_cards 클래스로 li 안에 card를 배치합니다.

프로젝트 Alpha
진행 중 · 2일 전
디자인 시스템 구축 및 컴포넌트 라이브러리 개발
이영희
UI/UX 디자이너
새 디자인 시안을 공유했습니다.
10분 전보기
알림
리스트와 카드를 함께 사용하는 패턴입니다.

정의 목록

variant="definition"으로 dl · list_definition을 적용합니다. title · description prop이 있으면 ListItem이 dt · dd로 직접 렌더됩니다.

OOCSS: 구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.
Design Token: 색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.
WCAG: 웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.

정의 목록 · 인라인

layout="inline"으로 제목·내용을 가로 배치합니다. 너비는 콘텐츠에 맞게 줄어듭니다.

OOCSS: 구조와 스킨을 분리해 클래스를 조합하는 CSS 방법론입니다.
Design Token: 색상·간격·타이포 등 디자인 값을 변수로 정의한 것입니다.
WCAG: 웹 콘텐츠 접근성 지침으로, 대비·키보드 사용성 등을 다룹니다.

정의 목록 · 값 우측 정렬

descAlign="right"로 dd(설명) 텍스트를 우측 정렬합니다. 주문 요약·금액 표시 등에 적합합니다.

주문번호: ORD-2024-0815
결제금액: ₩42,000
배송지: 서울특별시 강남구 테헤란로 123

API · List Props

Prop	타입	기본값	설명
`bordered`	boolean	false	테두리 (list_bordered)
`split`	boolean	false	항목 구분선 (list_divider)
`block`	boolean	false	부모 너비 100% (list_block, inline 레이아웃에서 auto 너비 덮어씀)
`size`	'md' \| 'compact'	md	compact는 list_compact
`variant`	'default' \| 'bullet' \| 'ordered' \| 'definition'	default	목록 유형 — bullet · ordered · definition 스킨 클래스 자동 적용
`tag`	'ul' \| 'ol' \| 'dl' \| 'div'	variant 기준	루트 태그 — 미지정 시 variant에 따라 ul · ol · dl 결정, div는 role="list"
`layout`	'block' \| 'inline'	block	block은 전체 너비 세로 배치, inline은 너비 auto + 제목·내용 가로 배치 (list_inline)
`inlineLabelWidth`	string	—	인라인 정의 목록 dt 열 너비 (layout="inline"일 때, --list-inline-label-width)
`inlineGap`	string	—	인라인 정의 목록 dt · dd 열 간격 (layout="inline"일 때, --list-inline-gap)
`descAlign`	'left' \| 'right'	left	정의 목록 dd 텍스트 정렬 (variant="definition"일 때, right는 list_desc-right)

API · ListItem Props

Prop	타입	기본값	설명
`title`	string	—	항목 제목 (list_title)
`description`	string	—	설명 (list_desc)
`meta`	string	—	보조 메타 (list_meta)
`tag`	'auto' \| 'li' \| 'dt' \| 'dd'	auto	항목 태그 — auto는 ul/ol→li, div→div+role=listitem, dl+title·description→dt·dd

API · List Slots

슬롯	설명
`default`	ListItem 자식

API · ListItem Slots

슬롯	설명
`prefix`	앞쪽 아바타·아이콘 등
`default`	본문 (title·description 대체)
`extra`	우측 보조 텍스트 (list_extra)
`actions`	우측 액션 (list_action)

클래스 · 속성

List · ListItem이 렌더하는 OOCSS 클래스입니다. class prop으로 스킨 클래스를 조합합니다.

클래스	설명
`list`	리스트 루트
`list_bordered · list_divider · list_compact`	스타일 변형
`list_bullet · list_bullet-circle · list_bullet-square`	불릿 목록 (ul)
`list_ordered · list_ordered-alpha · list_ordered-roman · list_ordered-upper-alpha · list_ordered-upper-roman`	번호 목록 (ol) — 소문자·대문자 알파벳·로마 숫자
`list_ordered-outline · list_ordered-dash`	계층 번호 — 뎁스별 1.1 · 1-1 형식 (중첩 ol에 동일 클래스 적용)
`list_ordered-depth`	뎁스별 번호 형식 자동 전환 (1 → a → i → 1 …)
`list_definition`	정의 목록 (dl) — dt · dd 용어-설명 쌍
`list_inline`	인라인 배치 — width auto, 제목·내용 가로 (layout="inline")
`list_block`	부모 너비 100% (block prop)
`list_desc-right`	정의 목록 dd 우측 정렬 (descAlign="right")
`list_item`	항목 (li · div[role=listitem])
`list_content · list_title · list_desc · list_meta`	항목 콘텐츠 파트
`list_extra · list_action`	우측 영역
`list_interactive`	클릭 가능 항목
`list_link`	항목 링크·버튼 — data-ripple 로 파장
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--list-gap`	var(--space-xs)	항목 간격
`--list-item-padding-y · --list-item-padding-x`	0.65rem · 1rem	항목 패딩
`--list-title-size · --list-desc-size · --list-meta-size`	—	텍스트 크기
`--list-inline-label-width · --list-inline-gap`	8rem · var(--space-md)	인라인 정의 목록 열 너비 · 열 간격