HTML5 - 목록 관련 태그

ul : 순서 없는 목록 태그

li: 리스트 요소 등록

   <ol>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

• HTML5
• CSS3
• JavaScript
• jQuery

ol : 순서 있는 목록태그

li: 리스트 요소 등록

 <ol>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

1. HTML5
2. CSS3
3. JavaScript
4. jQuery

 

영문 소문자 a. b. c. d. 로 표기

<ol type="a">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

영문 대문자 A. B. C. D로 표기

  
    <ol type="A">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

로마 숫자 소문자 ⅰⅱ ⅲ ⅳ 로 표기

   <ol type="i">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

로마 숫자 대문자 I II III IV 로 표기

 <ol type="I">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

시작 숫자 변경

 <ol type="1" start="5">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

5.HTML5

6.CSS3

7.JavaScripT

8.jQuery

 

역순으로 항목 표시

   <ol reversed="reversed">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ol>

 

4.HTML5

3.CSS3

2.JavaScripT

1.jQuery

 

-> 리스트 태그를 중복으로 사용할 수 있다.

 

<dl> 정의 목록 태그 : 어떠한 개념에 대한 설명을 목록으로 쓸 수 있다.

<dl>

    <dt> 목록의 제목 </dt>

     <dd> 목록에 설명 </dd>

<dl>