[HTML]목록 태그 <ul>, <ol>, <dl>

0. 항목(List Item)

목록의 내용이 되는 실질적 태그. 들여쓰기 및 줄 바꿈 기능.

<ul>, <ol> 태그 내부에서 사용되는 자식 태그.

불릿 기호는 CSS에서 설정.

 

1. 순서 없는 목록(Unordered List)

<h3>drink</h3>
    <ul> <!--불릿 기호 disc(default)-->
    	<li>coffee</li>
        <li>latte</li>
        <li>ade</li>
        <li>tea</li>
    </ul>

-불릿 기호 : disc, circle, square, none

 CSS에서 스타일 지정

 

 

2. 순서 있는 목록(Ordered List)

-시작 번호 지정  :  start="number"

<ol start="10"> <!--리스트 시작 숫자 10-->
    <li>Red</li>
    <li>Orange</li>
    <li>Yellow</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Navy</li>
    <li>Purple</li>
</ol>

 

-역순서 지정  :  reversed

<ol reversed> <!--내림차순-->
    <li>Red</li>
    <li>Orange</li>
    <li>Yellow</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Navy</li>
    <li>Purple</li>
</ol>

 

-순서 속성 지정  : type="1/A/a/Ⅰ/ⅰ"

<ol type="I"><!--로마 숫자 순서-->
    <li>alpha</li>
    <li>beta</li>
    <li>gamma</li>
    <li>delta</li>
    <li>epsilon</li>
</ol>

 

 

3. 정의 목록(Definition List)

<dl><!--음료 정의-->
    <dt>Coffee</dt>
       <dd>커피콩을 볶은 뒤 갈아 물에 우려낸 음료</dd>
    <dt>Ade</dt>
        <dd>얼음 넣은 탄산수에 과일청을 넣어 먹는 과즙 음료</dd>
</dl>

-<dt>  :  Definition Term. 용어 제목 태그.

-<dd>  :  Definition Description. 용어 설명 태그

 

 

 

※ type 속성 지원 여부

	<ol>	<ul>	<li>
type	o	x	x

type 속성을 지원하지 않아도 HTML5는 기존의 모든 문서 타입을 래핑. 모든 유효한 요소 포함

태그에서 디자인 적인 요소를 지정하지 말고 CSS에서 설정하란 뜻인듯.