03 · Components · 표현
리스트List
반복되는 항목을 일렬로 나열. 읽기 순서가 있으면 ol, 없으면 ul, 정의-설명 쌍이면 dl을 쓰세요 — 시맨틱은 접근성뿐 아니라 SEO에도 영향을 줍니다.
StableWCAG AA
구분선 리스트
tsx
<ul className="divide-y divide-[color:var(--color-border)] border-y border-[color:var(--color-border)]">
{items.map((item) => (
<li key={item.id} className="py-4">
<h3 className="text-[14.5px] font-semibold">{item.title}</h3>
<p className="mt-1 text-[13px] text-muted">{item.body}</p>
</li>
))}
</ul>미리보기
주일예배 영상 업로드
이번 주 설교 영상과 주보가 공개되었습니다.
새가족 환영회 안내
매월 첫째 주 예배 후 진행됩니다.
청년부 수련회 신청 마감
다음 주 금요일까지 홈페이지에서 접수.
링크 리스트
tsx
<ul className="grid gap-px bg-[color:var(--color-border)] sm:grid-cols-2">
{links.map((link) => (
<li key={link.href} className="bg-[color:var(--color-surface)]">
<Link href={link.href} className="group flex items-center justify-between p-4 hover:bg-[color:var(--color-blue-50)]">
<span>{link.label}</span>
<ArrowRight size={14} />
</Link>
</li>
))}
</ul>정의 리스트 (dl)
tsx
<dl className="grid grid-cols-[140px_1fr] gap-y-3 text-[14px]">
<dt className="font-medium">브랜드</dt>
<dd>navy-700</dd>
<dt className="font-medium">액센트</dt>
<dd>blue-500</dd>
<dt className="font-medium">서피스</dt>
<dd>white</dd>
</dl>미리보기
- 브랜드
- navy-700
- 액센트
- blue-500
- 서피스
- white
어떤 리스트를 쓸지
ul — 순서 없음. 네비게이션 메뉴·태그·피처 나열.
ol — 순서 있음. 단계 설명·순위·결과 목록.
dl — 정의-설명 쌍. 용어집·명세·키-값 메타데이터.