Tag - 목록(list) 관련

목록만들기

HTML에서 목록 다양한 리스트가 존재한다.

 

우선 가장 많이 쓰이는 두 가지가 있다.

 

◎ unordered list(순서가 없는 목록)

<ul>
	<li> 항목1 </li>
	<li> 항목2 </li>
	<li> 항목3 </li>
<ul>

 

항목을 나열하되 순서가 없는 경우 이를 이용한다.

 

◎ ordered list(순서가 있는 목록)

<ol>
    <li> 항목1 </li>
    <li> 항목2 </li>
    <li> 항목2 </li>
</ol>

 

항목을 나열하는데 순서가 필요한 경우 이를 이용한다.

 

<ol> 목록에 속성 주기

◎ type 속성

<ol style="A">
    <li> 항목1 </li>  // A. 항목1 출력
    <li> 항목2 </li>
    <li> 항목2 </li>
</ol>

 

<ol> 태그는 목록의순서가 있기 때문에 각 항목 앞에 1,2...같은 숫자가 붙는다.

 

<ol>태그에는 위와 같이 'type'이란 속성을 줘서 이 숫자들을 다른 종류로 바꿀 수 있다.

 

속성값	설명
1	숫자(기본값)
a	영문 소문자
A	영문 대문자
i	로마숫자 소문자
I	로마숫자 대문자

 

◎ start 속성

    <ol type="1" start="3">
    
        <li> 항목 1</li>  // '3. 항목 1' 출력
        <li> 항목 2</li>  // '4. 항목 2' 출력
        <li> 항목 3</li>
        <li> 항목 4</li>
        <li> 항목 5</li>
        
    </ol>

 

<ol>의 순서 표시를 중간부터 할 수 있게 한다. start에 넣은 숫자부터 순서를 표시한다.

 

◎ reversed 속성

    <ol type="1" reversed>
        <li> 항목 1</li>  // '5. 항목 1' 출력
        <li> 항목 2</li>  // '4. 항목 1' 출력
        <li> 항목 3</li>  // '3. 항목 1' 출력
        <li> 항목 4</li>
        <li> 항목 5</li>
    </ol>

 

<ol>에 reversed속성을 부여하면 순서를 거꾸로 표시한다.