8. [HTML/CSS] HTML 리스트 태그 (ul, ol, li)

HTML 리스트 태그 (ul, ol, li)

1. 순서가 없는 리스트 (ul - Unordered List)

ul 태그는 순서가 없는 목록을 만들 때 사용합니다. 각 항목 앞에 불릿(bullet) 기호가 표시됩니다.

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

2. 순서가 있는 리스트 (ol - Ordered List)

ol 태그는 순서가 있는 목록을 만들 때 사용합니다. 각 항목 앞에 숫자가 자동으로 표시됩니다.

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

3. 리스트 항목 (li - List Item)

li 태그는 ul이나 ol 태그 내부에서 각각의 목록 항목을 정의할 때 사용합니다.

주요 특징

• li 태그는 반드시 ul 또는 ol 태그 안에서만 사용해야 합니다.
• 중첩된 리스트를 만들 수 있습니다 (리스트 안에 리스트 생성 가능)
• CSS를 통해 불릿이나 숫자의 스타일을 변경할 수 있습니다.

중첩 리스트 예시

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
    <li>채소
        <ul>
            <li>당근</li>
            <li>양파</li>
        </ul>
    </li>
</ul>