Programming

목록

<ul></ul> : 순서 없는 목록(unordered list

순서 없는 목록을 나타냄

각각의 목록 아이템은 <li></li> 태그로 감싸줌

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li>포도</li>
        <li>오렌지</li>
    </ul>
</body>
</html>

결과

<ol></ol> : 순서 있는 목록(ordered list)

순서 있는 목록을 나타냄

각각의 목록 아이템은 <li></li> 태그로 감싸줌

속성

start
start="값"
특정 값부터 순서를 매길수 있음

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    
    <ol start="11">
        <li>김XX</li>
        <li>박XX</li>
        <li>오XX</li>
    </ol>
</body>
</html>

결과

<dl></dl> : 설명 목록(description list)

용어를 설명하는 목록을 나타냄

<dl></dl>
설명 목록 정의
<dt></dt>
용어 정의
<dd></dd>
각각의 용어의 설명

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <dl>
        <dt>&lt;dl&gt;&lt;/dl&gt;</dt>
        <dd>설명 목록 정의</dd>

        <dt>&lt;dt&gt;&lt;/dt&gt;</dt>
        <dd>용어 정의</dd>

        <dt>&lt;dd&gt;&lt;/dd&gt;</dt>
        <dd>각각의 용어의 설명</dd>
    </dl>
</body>
</html>

결과

하위 목록 생성

특정 목록 아이템의 하위에 목록을 만들 수 있음

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <ul>
        <li>과일
            <ol>
                <li>수박</li>
                <li>복숭아</li>
            </ol>
        </li>
        <li>채소
            <ol>
                <li>양파</li>
                <li>고추</li>
            </ol>
        </li>
    </ul>
</body>
</html>

결과

↑ ↓