HTML 리스트

사진: Unsplash의Ryan Kim

HTML 리스트 태그 정리하기

이번 포스팅에서는 HTML의 리스트 태그를 실습하며 순서가 있는 리스트, 순서가 없는 리스트, 그리고 정의 리스트를 알아보겠습니다.

---

1. 순서가 있는 리스트 (<ol>)

순서가 있는 리스트는 번호가 붙는 리스트를 만들 때 사용합니다.

<ol>
    <li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
    <li>리스트 4</li>
    <li>리스트 5</li>
    <li>
        리스트 6
        <ul>
            <li>순서가 없는 하위 리스트</li>
        </ul>
    </li>
</ol>

결과 화면:

1. 리스트 1
2. 리스트 2
3. 리스트 3
4. 리스트 4
5. 리스트 5
6. 리스트 6
   • 순서가 없는 하위 리스트

---

2. 순서가 없는 리스트 (<ul>)

순서가 없는 리스트는 점(•) 또는 스타일에 따라 기호를 사용하여 목록을 표시합니다.

<ul>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
</ul>

결과 화면:

• 아이템 1
• 아이템 2
• 아이템 3

---

3. 정의 리스트 (<dl>)

정의 리스트는 용어와 해당 설명을 정의하는 데 사용됩니다. <dt>는 용어(Definition Term)를, <dd>는 설명(Definition Description)을 나타냅니다.

<dl>
    <dt>캐스퍼</dt>
    <dd>강사이다.</dd>
    <dd>현업에서 일하고 있다.</dd>
</dl>

결과 화면:

캐스퍼

• 강사이다.
• 현업에서 일하고 있다.

---

정리

리스트 태그 요약:

• <ol>: 순서가 있는 리스트
• <ul>: 순서가 없는 리스트
• <dl>: 정의 리스트