[HTML] 리스트(ul,ol,li, dl,dt,dd) 태그

1. 리스트 태그란?

    여러 정보의 목록을 만드는 태그

(좌) 순서가 없는 리스트 화면 예시 / (우) 순서가 있는 리스트 화면 예시

    1) ul : 순서가 없는 리스트(unordered list)

    <p><b>순서가 없는 리스트</b></p>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
    </ul>

 

    2) ol : 순서가 있는 리스트(ordered list)

    <p><b>순서가 있는 리스트</b></p>
    <ol>
        <li>서울</li>
        <li>경기</li>
        <li>충청</li>
        <li>전라</li>
        <li>경상</li>
        <li>강원</li>
    </ol>

        - start : <ol>의 시작 값 설정

     <p><b>순서가 있는 리스트 5</b></p>
    <ol start="5">
        <li>서울</li>
        <li>경기</li>
        <li>충청</li>
        <li>전라</li>
        <li>경상</li>
        <li>강원</li>
    </ol>

 

        - type : <ol>의 인덱스 값 설정. 1 / a / A / i / I (기본값 = 1)

    <p><b>순서가 있는 리스트 i</b></p>
    <ol type="i">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
    </ol>
    
        <p><b>순서가 있는 리스트 a</b></p>
    <ol type="a">
        <li>가지</li>
        <li>나비</li>
        <li>다리</li>
        <li>라면</li>
        <li>마늘</li>
    </ol>

ol_순서 있는 리스트 옵션 반영 화면 표시

    3) dl, dt, dd : 정의 목록 태그

        - (definition list) : 정의 목록

        - (definition form) : 정의 용어

        - (definition discription) : 정의 설명

    cf) 용어의 뜻은 정의를 하는데에 사용된다 되어있지만, 여러개의 연관된 리스트를 만들 때에도 사용 가능해 보인다.

    <dl>
        <dt>메뉴 리스트</dt>
        <dd>menu1</dd>
        <dd>menu2</dd>
        <dd>menu3</dd>
        <dd>menu4</dd>
        <dd>menu5</dd>

        <dt>지역 리스트</dt>
        <dd>서울</dd>
        <dd>경기</dd>
        <dd>층청</dd>
        <dd>전라</dd>
        <dd>경상</dd>
        <dd>강원</dd>
    </dl>

dl태그 화면표시