[HTML] 목록(List)태그 (ul, ol, li, type)

Development/HTML

[HTML] 목록(List)태그 (ul, ol, li, type)

MUMYEONG IMDA 2022. 3. 9. 15:44

목록(List)태그

웹페이지에서 내용을 일렬로 나열하거나 목록 형태로 지정하기 위해 사용한다.
웹페이지에서 내비게이션 바를 만들 때 주로 사용한다.
리스트의 종류에는 순서가 없는 목록(ul)과 순서가 있는 목록(ol) 태그가 있다.
ol태그는 속성을 통해 순서타입을 변경할 수 있다.

1) ul(순서가 없는 목록)

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List</title>
</head>

<body>
    <ul>
        <li>호랑이</li>
        <li>사자</li>
        <li>늑대</li>
        <li>표범</li>
        <li>치타</li>
    </ul>
</body>

</html>

결과

2) ol(순서가 있는 목록)

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List</title>
</head>

<body>
    <ol>
        <li>고래</li>
        <li>돌고래</li>
        <li>상어</li>
        <li>물개</li>
        <li>바다표범</li>
    </ol>
</body>

</html>

결과

3) 중첩 목록 태그

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List</title>
</head>

<body>
    <ol>
        <li>육상동물
            <ul>
                <li>호랑이</li>
                <li>사자</li>
                <li>늑대</li>
                <li>표범</li>
                <li>치타</li>
            </ul>
        </li>
        <li>바다동물
            <ul>
                <li>고래</li>
                <li>돌고래</li>
                <li>상어</li>
                <li>물개</li>
                <li>바다표범</li>
            </ul>
        </li>
    </ol>
</body>

</html>

결과

4) 속성(type) 모음

1 : 숫자(기본값)
A : 알파벳 대문자
a : 알파벳 소문자
I : 로마숫자 대문자
i : 로마숫자 소문자

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List</title>
</head>

<body>
    <ol type="1">
        <li>숫자</li>
        <li>숫자</li>
        <li>숫자</li>
    </ol>
    <ol type="A">
        <li>알파벳(대)</li>
        <li>알파벳(대)</li>
        <li>알파벳(대)</li>
    </ol>
    <ol type="a">
        <li>알파벳(소)</li>
        <li>알파벳(소)</li>
        <li>알파벳(소)</li>
    </ol>
    <ol type="I">
        <li>로마숫자(대)</li>
        <li>로마숫자(대)</li>
        <li>로마숫자(대)</li>
    </ol>
    <ol type="i">
        <li>로마숫자(소)</li>
        <li>로마숫자(소)</li>
        <li>로마숫자(소)</li>
    </ol>
</body>

</html>

결과

LIST