tag - ul, ol, list

Soozoo·2024년 7월 29일

Markup

목록 보기

6/11

1. `ul` 태그

ul 태그는 순서 없는 목록(순서가 중요하지 않은 항목 목록)을 정의하는 데 사용됩니다. 목록 항목은 li 태그를 사용하여 정의됩니다.

예제

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

2. `ol` 태그

ol 태그는 순서 있는 목록(순서가 중요한 항목 목록)을 정의하는 데 사용됩니다. 목록 항목은 li 태그를 사용하여 정의됩니다.

예제

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

3. `li` 태그

li 태그는 목록 항목을 정의하는 데 사용됩니다. 이 태그는 ul 또는 ol 태그 내부에서 사용됩니다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tag - ul, ol, list, hn</title>
</head>
<body>

    <h4>사용자 리스트(이모티콘)</h4>
    <br>
        <img src="../html/images/bullet.gif">강아지</br>
        <img src="../html/images/bullet.gif">고양이</img></br>
        <img src="../html/images/bullet.gif">망아지</img>
    </ul>

    <h4>Ordered List</h4>
    <ol>
        <li>Apple</li>
        <li>Banana</li>
        <li>Lemon</li>
        <li>Orange</li>
    </ol>

    <ol type="I">
        <li>Apple</li>
        <li>Banana</li>
        <li>Lemon</li>
        <li>Orange</li>
    </ol>

    <ol type="a" start="3">
        <li>Apple</li>
        <li>Banana</li>
        <li>Lemon</li>
        <li>Orange</li>
    </ol>
    <h4>UnOrdered List</h4>
    <ul type="square">
        <li>사자</li>
        <li>호랑이</li>
        <li>기린</li>
        <li>코끼리</li>
        <li>다람쥐</li>
    </ul>

    <ul type="circle">
        <li>사자</li>
        <li>호랑이</li>
        <li>기린</li>
        <li>코끼리</li>
        <li>다람쥐</li>
    </ul>

</body>
</html>