Data
List
semantic HTML순서가 있거나 없는 항목 집합을 표시합니다.
Live example
| 이름 | 담당자 | 상태 |
|---|---|---|
| 프로젝트 A | 김지훈 | 활성 |
| 프로젝트 B | 이서연 | 대기 |
<form data-ui="filter-bar"><label>검색<input type="search" name="q" placeholder="이름 검색"></label><label>상태<select name="status"><option>전체</option><option>활성</option></select></label><button type="submit">필터 적용</button></form><div data-ui="table-wrap"><table><caption>List 데이터</caption><thead><tr><th scope="col">이름</th><th scope="col">담당자</th><th scope="col">상태</th></tr></thead><tbody><tr><th scope="row">프로젝트 A</th><td>김지훈</td><td><mark>활성</mark></td></tr><tr><th scope="row">프로젝트 B</th><td>이서연</td><td>대기</td></tr></tbody></table></div>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.1 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
Native HTML semantics and keyboard behavior are the baseline.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->