[HTML] 6. 목록 태그 (<ul>, <li>) 정리

Mar 06, 2025


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul><!--순서가 없는 목록-->
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ul>
    <hr><!--가로줄-->
    <ul>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ul>
</body>
</html>

💡

1. HTML 목록 태그란?

HTML에서는 항목을 나열할 때 목록(List) 태그 사용

✅ 순서 없는 목록: <ul> (unordered list) → 기본적으로 점(•)이 붙음

✅ 순서 있는 목록: <ol> (ordered list) → 번호(1, 2, 3...)가 붙음

✅ 목록 아이템: <li> (list item) → 목록의 개별 항목

HTML