List tag

웹 페이지에서 메뉴바, 게시글 목록, 용어 사전 등을 만들 때 반드시 사용되는 핵심 요소들입니다.

---

1. 순서가 있는 목록 <ol> (Ordered List)

항목 앞에 1, 2, 3과 같은 **순서(번호)**가 자동으로 붙는 목록입니다.

• <li> (List Item): 목록의 각 항목을 나타내는 태그로, 반드시 <ol> 또는 <ul> 안에 위치해야 합니다.
• 특징: type 속성을 통해 숫자 대신 알파벳(A, a)이나 로마자(I, i)로 순서를 바꿀 수 있습니다.

HTML

 

<ol>
  <li>라면 물을 끓인다.</li>
  <li>면과 스프를 넣는다.</li>
  <li>3분간 더 끓인 후 맛있게 먹는다.</li>
</ol>

---

2. 순서가 없는 목록 <ul> (Unordered List)

항목 앞에 번호 대신 **불릿(점, 기호)**이 붙는 목록입니다.

• 용도: 순서가 중요하지 않은 메뉴 항목, 특징 나열, 쇼핑 리스트 등에 주로 쓰입니다.
• 특징: CSS를 통해 점의 모양을 없애거나 화살표 같은 아이콘으로 바꿀 수 있어 내비게이션 바 제작에 필수적입니다.

HTML

 

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

---

3. 설명 목록 <dl> (Description List)

이름(용어)과 그에 대한 설명이 한 쌍으로 이루어진 목록입니다.

• <dt> (Description Term): 정의하려는 용어의 이름을 나타냅니다.
• <dd> (Description Details): 해당 용어에 대한 설명을 나타냅니다. 보통 들여쓰기가 되어 표시됩니다.
• 용도: 사전 형식의 정의, FAQ(자주 묻는 질문), 상품의 사양(색상: 블랙, 크기: XL) 등을 표현할 때 적합합니다.

HTML

 

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 만드는 언어입니다.</dd>
  <dt>CSS</dt>
  <dd>웹 페이지의 디자인을 담당하는 언어입니다.</dd>
</dl>

---

📋 목록 태그 한눈에 비교

태그	의미	자식 태그	기본 모양
<ol>	순서 있는 목록	<li>	1. 2. 3. ...
<ul>	순서 없는 목록	<li>	• • • ...
<dl>	설명 목록	<dt>, <dd>	용어 - 설명(들여쓰기)

---

학습 정리

• 모든 목록 항목은 반드시 부모 태그(ol, ul, dl)로 감싸야 문법적으로 올바릅니다.
• <li> 태그는 단독으로 쓰일 수 없으며 항상 ol이나 ul의 자식으로 존재해야 합니다.
• 설명 목록(dl)에서는 하나의 dt에 여러 개의 dd가 올 수도 있습니다.

---

정보를 깔끔하게 정리하는 목록 태그들까지 정복하셨습니다!

---