코딩스쿨

HTML Lists

1. HTML Lists란?

HTML에서 Lists(목록)는 항목을 나열할 때 사용됩니다. 리스트는 사용자가 쉽게 정보를 이해하고 정리할 수 있도록 도와줍니다. HTML에는 순서가 있는 리스트와 순서가 없는 리스트, 그리고 정의 리스트라는 세 가지 기본 리스트 유형이 있습니다.

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

순서가 있는 리스트는 항목 앞에 번호가 자동으로 붙습니다.

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

예시:

HTML 배우기
CSS 배우기
JavaScript 배우기

3. 순서가 없는 리스트 (Unordered List)

순서가 없는 리스트는 항목 앞에 번호가 붙지 않고 기호가 붙습니다.

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

예시:

사과
바나나
포도

4. 정의 리스트 (Definition List)

정의 리스트는 용어와 그 정의를 나열할 때 사용됩니다.

<dl>
    <dt>HTML</dt>
    <dd>웹 페이지의 구조를 정의하는 언어</dd>

    <dt>CSS</dt>
    <dd>웹 페이지의 스타일을 정의하는 언어</dd>
</dl>

예시:

HTML: 웹 페이지의 구조를 정의하는 언어
CSS: 웹 페이지의 스타일을 정의하는 언어

5. 리스트의 중첩

리스트 안에 또 다른 리스트를 포함할 수 있습니다.

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
    <li>채소
        <ul>
            <li>당근</li>
            <li>오이</li>
        </ul>
    </li>
</ul>

6. 리스트에 스타일 적용하기

CSS를 사용하여 리스트의 스타일을 변경할 수 있습니다.

<style>
    ul {
        list-style-type: square; /* 기호를 사각형으로 변경 */
    }
    ol {
        list-style-type: upper-roman; /* 로마 숫자로 변경 */
    }
</style>

7. 커스텀 리스트 기호 추가하기

이미지를 사용해 커스텀 기호를 추가할 수도 있습니다.

<style>
    ul {
        list-style-image: url('bullet.png'); /* 리스트 기호 대신 이미지 사용 */
    }
</style>

코딩 스쿨 HTML