MUMYEONG

[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

'Development > HTML' 카테고리의 다른 글

[HTML] 오디오(Audio)태그  (1) 2022.03.10
[HTML] 비디오(Video)태그  (1) 2022.03.10
[HTML] 이미지태그 (img, src, alt, width, height)  (1) 2022.03.09
[HTML] 앵커(anchor)태그 (a, href, target)  (1) 2022.03.09
[HTML] 본문태그 (p, pre, q, br, hr)  (1) 2022.03.09
'Development/HTML' Related Articles more
Comments