목록 구조화 (Lists)
메뉴바, 게시판 글 목록, 레시피 순서 등 무언가를 나열할 때 무조건 <div>만 쓰기보다는 목록 태그(List)를 사용하는 것이 좋습니다. 컴퓨터가 "아! 이건 리스트구나" 하고 이해해서 훨씬 체계적인 웹이 되기 때문입니다.
🛒 쇼핑 리스트 vs 👨🍳 요리 레시피
<ul> (Unordered List)
- 사과 사기
- 우유 사기
- 계란 사기
순서가 상관없는 쇼핑 목록. (글머리 기호 사용)
<ol> (Ordered List)
- 물 끓이기
- 면 넣기
- 스프 넣기
순서가 반드시 지켜져야 하는 레시피. (번호 사용)
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<ul> | - | 순서가 중요하지 않은 목록(Unordered List)을 생성합니다. (글머리 기호 나열) |
<ol> | - | 순서가 있는 목록(Ordered List)을 생성합니다. |
type | 순서의 형태를 지정합니다. • 1 : 숫자 (기본값: 1, 2, 3...) • A : 대문자 알파벳 (A, B, C...) • a : 소문자 알파벳 (a, b, c...) • I : 대문자 로마숫자 (I, II, III...) • i : 소문자 로마숫자 (i, ii, iii...) | |
start | 순서가 시작할 번호를 변경합니다. (예: start="3" 지정 시 3부터 시작) | |
<li> | - | 목록 내의 각 항목(List Item)을 정의합니다. (ul과 ol의 자식 태그) |
value | (ol 내부에서) 특정 항목의 번호를 강제로 변경할 때 사용합니다. |
<!-- 순서가 없는 목록 (Unordered) -->
<ul>
<li>HTML 배우기</li>
<li>CSS 마스터하기</li>
<li>Javascript 겉핥기</li>
</ul>
<!-- 순서가 있는 목록 (Ordered) -->
<ol type="A" start="3">
<li>회원가입하기</li>
<li>상품 장바구니에 담기</li>
<li>결제하기</li>
</ol>