Part 3 : 목록 태그 사용법

웹페이지에서 목록(list)을 만들 때는 <ul>, <ol>, <li> 태그를 사용합니다.

또한, 설명 목록을 작성할 때는 <dl>, <dt>, <dd> 태그를 활용할 수 있습니다.

이번 포스팅에서는 이러한 목록 태그들을 자세히 살펴보겠습니다.

 

---

 

1️⃣ <ul> 태그 (순서 없는 목록)

리스트 앞에 기본적으로 ●(점) 기호가 표시됩니다.

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

 

🔹 네비게이션 메뉴나 일반 목록을 만들 때 자주 사용됩니다.

 

---

 

2️⃣ <ol> 태그 (순서 있는 목록)

리스트 앞에 자동으로 숫자가 매겨지는 목록을 생성합니다.

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

 

🔹 **절차가 중요한 콘텐츠(예: 사용법, 레시피, 단계별 가이드)**에 적합합니다.

 

---

 

3️⃣ <dl> 태그 (설명 목록)

설명 목록을 만들 때 사용됩니다. <dt>는 용어(term), <dd>는 해당 용어에 대한 설명(definition)입니다.

<dl>
  <dt>HTML</dt>
  <dd>웹페이지를 구성하는 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>웹페이지의 스타일을 지정하는 언어</dd>
</dl>

 

🔹 사전식 정의나 FAQ, 용어 설명 페이지에서 자주 사용됩니다.

 

---

 

🎯 마무리

이제 HTML의 목록 태그를 활용하여 데이터를 구조적으로 정리할 수 있습니다!

🚀 다음 포스팅에서는 테이블 태그에 대해 다뤄보겠습니다. 😊

 

 

 

- Dblisher -