웹 개발/HTML

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

코딩하는흑구 2019. 3. 27. 00:17

List, 목록 태그

1. <ol>태그

- 순서가 있는 목록

- Ordered List


2. <ul>태그

- 순서가 없는 목록

- Unordered List


3. <dl>태그

- 정의 목록(용어 목록)

- Definition List


4. <li>태그

- 목록의 항목

- List Item


<ol> </ol> 태그


예제 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>오늘의 할일</h1>
 
<ol type="i">
    <!-- 여기 안에는 li밖에 못온다. -->
    <li><b>마트</b>에서 장보기</li>
    <li>HTML 정리하기
        <ol>
            <li>태그정리하기</li>
            <li>속성정리하기</li>
        </ol>
    </li>
    <li>강아지 밥주기</li>
    <li>이클립스 설치하기</li>
</ol>
cs


결과 출력




<ul> </ul> 태그


예제 코드


1
2
3
4
5
6
7
8
9
<h1>내 일의 할일</h1>
 
<!-- bullet : 불릿 -->
<ul type="square">
    <li>팀회식</li>
    <li>사우나가기</li>
    <li>오라클 설치하기</li>
    <li>고양이 밥주기</li>
</ul>
cs


결과 출력



<dl> </dl> 태그


예제 코드


1
2
3
4
5
6
7
8
9
10
11
<h1>자바 용어</h1>
<dl>
    <dt>클래스</dt><!-- definition term. 용어 -->
    <dd>클래스는 이러이러하고 저러저러하다.클래스는 이러이러하고 저러저러하다.</dd><!-- definition description. 용어 설명 -->
    
    <dt>오라클</dt>
    <dd>클래스는 이러이러하고 저러저러하다.클래스는 이러이러하고 저러저러하다.</dd><!-- definition description. 용어 설명 -->
    
    <dt>HTML</dt>
    <dd>클래스는 이러이러하고 저러저러하다.클래스는 이러이러하고 저러저러하다.</dd><!-- definition description. 용어 설명 -->
</dl>
cs


결과 출력