목록나열 태그에 대해서 알아보자
ul (Unordered List)
순서가 지정되지 않은 목록 나열할 때 사용
<ul aria-label="프론트엔드 기술 목록">
<li>
React
<ul>
<li>CRA</li>
<li>VITE</li>
</ul>
</li>
<li>Next.js</li>
<li>TypeScript</li>
</ul>
✅ 예시
- React
- CRA
- VITE
- Next.js
- TypeScript
✅ 설명
- ul 바로 하위 자식 요소는 li 태그만 사용가능
- 기본 글머리 기호는 disc (list-style-type: disc)
ol (Ordered List)
순서가 지정된 목록 나열할 때 사용
<ol aria-label="프론트엔드 기술 목록">
<li>
React
<ul>
<li>CRA</li>
<li>VITE</li>
</ul>
</li>
<li>Next.js</li>
<li>TypeScript</li>
</ol>
✅ 예시
- React
- CRA
- VITE
- Next.js
- TypeScript
✅ 설명
- ol 바로 하위 자식 요소는 li 태그만 사용가능
- 기본 글머리 기호는 decimal 숫자 (list-style-type: decimal)
/* 숫자 (기본값) */
<ol type="1">
/* 소문자 */
<ol type="a">
/* 대문자 */
<ol type="A">
/* 로마숫자(소문자) */
<ol type="i">
/* 로마숫자(대문자) */
<ol type="I">
/* 3부터 시작 */
<ol start="3">
/* 역순 */
<ol reversed>
/* start부터 역순 */
<ol reversed start="5">
dl (Description List)
용어를 정의하거나 key-value 형태의 항목 나열할 때 사용
<dl>
<dt>감자<dt>
<dd>10,000원<dd>
<dt>당근<dt>
<dd>4,000원<dd>
</dl>
<dl>
<div>
<dt>감자<dt>
<dd>10,000원<dd>
</div>
<div>
<dt>당근<dt>
<dd>4,000원<dd>
</div>
</dl>
✅ 설명
- dl 자식요소로는 dt, dd 태그만 가능 (key : dt / value : dd)
- dt 태그 없이 dd만 사용 ❌, dt 태그를 설명하기 위한 여러 dd 사용가능
- 연관된 dt, dd 그룹을 묶는 용도의 <div>태그는 허용
반응형
'Frontend > 웹접근성' 카테고리의 다른 글
[웹접근성] 명료성에 대해서 (명도차, 무늬 활용) (0) | 2025.05.12 |
---|