HTML 목록 요소 정리 (UL, OL, LI, DL)

HTML 목록 요소 정리 (UL, OL, LI, DL)

HTML 목록 요소의 개요

웹 페이지에서 정보를 나열할 때 가장 많이 쓰이는 것이 목록(List)입니다.

HTML은 목록을 만들기 위해 여러 가지 요소를 제공합니다.

대표적으로 UL, OL, LI, DL, DT, DD 등이 있습니다.

---

1. 순서 없는 목록 (Unordered List: <ul>)

• 설명: 순서가 중요하지 않은 항목들을 나열할 때 사용합니다.
• 기본 표시: 각 항목 앞에 점(•)이나 원(○) 같은 기호가 붙습니다.

<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>

출력 결과:

• 사과
• 바나나
• 포도

👉 특징: 항목의 순서보다는 단순히 "목록의 집합"이라는 의미를 가집니다.

---

2. 순서 있는 목록 (Ordered List: <ol>)

• 설명: 항목들의 순서가 중요할 때 사용합니다.
• 기본 표시: 각 항목 앞에 숫자(1, 2, 3 …)가 자동으로 붙습니다.

<ol>
<li>물 끓이기</li>
<li>면 넣기</li>
<li>스프 넣기</li>
</ol>

출력 결과:

1. 물 끓이기
2. 면 넣기
3. 스프 넣기

👉 특징: 레시피, 단계별 지침, 순서가 중요한 데이터에 적합합니다.

---

OL의 속성 활용

1. type 속성 – 번호 스타일 변경

<ol type="A">
<li>첫 번째</li>
<li>두 번째</li>
</ol>

출력 → A. 첫 번째, B. 두 번째

2. start 속성 – 시작 번호 변경

<ol start="5">
<li>다섯 번째</li>
<li>여섯 번째</li>
</ol>

출력 → 5. 다섯 번째, 6. 여섯 번째

3. reversed 속성 – 역순 번호

<ol reversed>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ol>

출력 → 3. 사과, 2. 바나나, 1. 포도

---

3. 목록 항목 (List Item: <li>)

• 설명: 목록의 실제 항목을 의미합니다.
• 특징: <ul>이나 <ol> 안에서만 사용 가능합니다.
• 예시:

<ul>
<li>빵</li>
<li>우유</li>
</ul>

👉 <li>는 "목록 안의 한 조각"이라고 생각하면 이해하기 쉽습니다.

---

4. 정의 목록 (Description List: <dl>, <dt>, <dd>)

• 설명: 용어와 그에 대한 설명을 짝지어 보여줄 때 사용합니다.
• 구성 요소:

• <dl>: 정의 목록 전체를 감쌈
• <dt>: 정의할 용어(Definition Term)
• <dd>: 용어에 대한 설명(Definition Description)

<dl>
<dt>HTML</dt>
<dd>웹 페이지 구조를 만드는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 디자인과 스타일을 담당하는 언어</dd>
<dt>JavaScript</dt>
<dd>웹 페이지를 동적으로 만들어주는 프로그래밍 언어</dd>
</dl>

출력 결과:

HTML

웹 페이지 구조를 만드는 마크업 언어

CSS

웹 페이지의 디자인과 스타일을 담당하는 언어

JavaScript

웹 페이지를 동적으로 만들어주는 프로그래밍 언어

👉 특징: 사전, FAQ, 용어집 같은 형태를 만들 때 유용합니다.

---

5. UL과 OL의 비교

구분	UL (순서 없는 목록)	OL (순서 있는 목록)
의미	항목의 순서가 중요하지 않음	항목의 순서가 중요함
표시	점(•), 원(○) 등 기호	1, 2, 3 … 또는 A, B, C …
사용 예시	쇼핑 목록, 메뉴 리스트	요리 레시피, 단계별 절차

---

6. 실제 사용 예시

쇼핑 리스트 (순서 없는 목록)

<h3>장보기 목록</h3>
<ul>
<li>우유</li>
<li>계란</li>
<li>빵</li>
</ul>

출력 결과:

• 우유
• 계란
• 빵

---

라면 끓이는 순서 (순서 있는 목록)

<h3>라면 끓이는 방법</h3>
<ol>
<li>물 끓이기</li>
<li>면 넣기</li>
<li>스프 넣기</li>
<li>익으면 먹기</li>
</ol>

출력 결과:

1. 물 끓이기
2. 면 넣기
3. 스프 넣기
4. 익으면 먹기

---

결론

• UL: 순서 없는 목록
• OL: 순서 있는 목록
• LI: 목록의 실제 항목
• DL/DT/DD: 용어와 설명을 정의하는 목록