Chapter 1-12. 목록만들기(HTML)

📌 HTML 목록 만들기

HTML에서는 **목록(list)**을 만들어 관련된 항목(item)들을 나열할 수 있습니다. 목록은 크게 두 가지 종류로 나눌 수 있습니다:

1. 순서 없는 목록(Unordered List): 항목에 순서가 없고, 보통 점이나 동그라미 기호로 나열됩니다.
2. 순서 있는 목록(Ordered List): 항목에 순서가 있으며, 번호가 매겨집니다.

🔹 순서 없는 목록 (Unordered List)

• 순서가 중요한 항목이 아닐 때 사용합니다.
• <ul> 태그를 사용하여 목록을 시작하고, 각 항목은 <li> 태그로 나열합니다.

✅ 예시

<ul>
  <li>고양이</li>
  <li>강아지</li>
  <li>토끼</li>
</ul>

• 이 코드는 순서 없는 목록을 생성하며, 각 항목은 점으로 표시됩니다.

---

🔹 순서 있는 목록 (Ordered List)

• 항목에 순서가 중요한 경우 사용하며, 번호가 매겨진 목록을 생성합니다.
• <ol> 태그를 사용하여 목록을 시작하고, 항목은 <li> 태그로 나열합니다.

✅ 예시

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

• 이 코드는 순서 있는 목록을 생성하며, 각 항목은 숫자로 표시됩니다.

---

📊 목록 항목 추가 및 구성

<li> 태그는 목록에 항목을 추가하는 데 사용됩니다. 항목들을 포함하는 태그가 <ul>(순서 없는 목록) 또는 <ol>(순서 있는 목록)인지에 따라 항목이 어떻게 표시되는지가 달라집니다.

• <ul>: 순서 없는 목록, 항목은 기본적으로 점이나 동그라미로 표시됩니다.
• <ol>: 순서 있는 목록, 항목은 번호로 표시됩니다.

🔸 <ul>, <ol>, <li> 태그 설명

• <ul>: 순서 없는 목록을 정의하는 태그입니다.
• <ol>: 순서 있는 목록을 정의하는 태그입니다.
• <li>: 목록의 각 항목을 정의하는 태그입니다.

✅ 예시 (혼합 사용)

<h2>애완 동물 목록</h2>

<p>순서 없는 목록:</p>
<ul>
  <li>고양이</li>
  <li>강아지</li>
  <li>토끼</li>
</ul>

<p>순서 있는 목록:</p>
<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

• 위 예시는 애완 동물 목록을 순서 없는 목록과 순서 있는 목록으로 각각 나누어 보여줍니다.

---

📌 목록을 사용한 레이아웃과 디자인

• 목록을 사용하여 항목을 나열하는 것 외에도, 목록을 활용하여 레이아웃을 정리하거나 디자인 요소로 활용할 수 있습니다.
• 목록은 웹 페이지에서 콘텐츠를 구분하고 정리하는 데 유용합니다.

---

🚩 결론

• HTML 목록은 콘텐츠를 나열하는 데 사용되는 기본적인 도구입니다.
• **<ul>**은 순서 없는 목록을, **<ol>**은 순서 있는 목록을 생성합니다.
• 목록 항목은 <li> 태그로 정의됩니다.
• HTML 목록을 적절히 활용하면 효율적인 콘텐츠 구성과 가독성 향상에 도움이 됩니다.