HTML5 리스트 태그 사용법

1. 리스트 태그란?

리스트 태그는 HTML 문서에서 순서가 있는 목록(ol), 순서가 없는 목록(ul), 그리고 목록 항목(li)을 정의하는 태그입니다. 웹 페이지에서 정보를 구조화하고 계층적으로 표현하는 데 사용됩니다.

2. 기본 구조

순서가 없는 목록 (ul)

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

순서가 있는 목록 (ol)

<ol>
    <li>첫 번째 단계</li>
    <li>두 번째 단계</li>
    <li>세 번째 단계</li>
</ol>

중첩 목록

<ul>
    <li>메인 항목 1
        <ul>
            <li>하위 항목 1-1</li>
            <li>하위 항목 1-2</li>
        </ul>
    </li>
    <li>메인 항목 2</li>
</ul>

3. 자주 사용되는 속성

태그 속성 설명 예시
ol type 번호 매기기 방식 <ol type="A">
ol start 시작 번호 <ol start="5">
ul class 스타일 클래스 <ul class="menu">
li value 항목 번호 <li value="3">

4. 실제 사용 예제

<nav class="main-menu">
    <ul class="menu-list">
        <li class="menu-item">
            <a href="/">홈</a>
        </li>
        <li class="menu-item">
            <a href="/products">제품</a>
            <ul class="submenu">
                <li><a href="/products/new">신제품</a></li>
                <li><a href="/products/popular">인기제품</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="/about">소개</a>
        </li>
    </ul>
</nav>

<article class="recipe">
    <h2>요리 방법</h2>
    <ol class="steps">
        <li>재료를 준비합니다.</li>
        <li>냄비에 물을 붓고 끓입니다.</li>
        <li>재료를 넣고 10분간 조리합니다.</li>
        <li>불을 끄고 5분간 뜸들입니다.</li>
    </ol>
</article>

💡 주의사항

5. 스타일링 예제

<style>
    .menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 20px;
    }
    
    .menu-item {
        position: relative;
    }
    
    .menu-item a {
        color: #333;
        text-decoration: none;
        padding: 10px;
        display: block;
    }
    
    .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        min-width: 200px;
    }
    
    .menu-item:hover .submenu {
        display: block;
    }
    
    .steps {
        counter-reset: step;
        list-style: none;
        padding: 0;
    }
    
    .steps li {
        position: relative;
        padding-left: 40px;
        margin-bottom: 20px;
    }
    
    .steps li::before {
        counter-increment: step;
        content: counter(step);
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        background: #4CAF50;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .menu-list {
            flex-direction: column;
        }
        
        .submenu {
            position: static;
            box-shadow: none;
        }
    }
</style>

6. 성능 최적화 팁

7. 검증 및 테스트

리스트 태그가 올바르게 사용되었는지 확인하는 방법: