📌 HTML 목록 만들기
HTML에서는 **목록(list)**을 만들어 관련된 항목(item)들을 나열할 수 있습니다. 목록은 크게 두 가지 종류로 나눌 수 있습니다:
- 순서 없는 목록(Unordered List): 항목에 순서가 없고, 보통 점이나 동그라미 기호로 나열됩니다.
- 순서 있는 목록(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 목록을 적절히 활용하면 효율적인 콘텐츠 구성과 가독성 향상에 도움이 됩니다.
'HTML & CSS' 카테고리의 다른 글
Chapter 1-14. 입력 태그 <input> (HTML) (0) | 2025.03.28 |
---|---|
Chapter 1-13. 표만들기 (HTML) (0) | 2025.03.28 |
Chapter 1-11. 링크 표시하기(HTML) (0) | 2025.03.28 |
Chapter 1-8. 컨테이너와 전역 속성 (0) | 2025.03.28 |
Chapter 1-6. 텍스트 표시하기 (0) | 2025.03.28 |