HTML5 : 목록 ul, ol, li, dl, dt, dd태그
<ul>
unordered list의 약자. 순서가 없는 목록을 나타낸다.
안에 <li>로 아이템을 넣어주면 된다.
기본적으로 옆에 bullet 문자 (●)로 표시된다.
CSS list-style-type 속성으로 마커를 변경할 수 있다:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
<ol>
ordered list 의 약자. 순서가 있는 목록을 나타낸다.
기본적으로 1. 2. 3. 으로 표시된다.
타입 속성을 변경해 <li>의 마커 타입을 변경할 수 있다:
| Type | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default) |
| type="A" | The list items will be numbered with uppercase letters |
| type="a" | The list items will be numbered with lowercase letters |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="i" | The list items will be numbered with lowercase roman numbers |
코드:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>An Ordered HTML List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> | cs |
결과:
An Unordered List:
- Item
- Item
- Item
- Item
An Ordered List:
- First item
- Second item
- Third item
- Fourth item
<dl>,<dt>,<dd>
설명 목록을 위한 태그.
제목과 그에 대한 설명으로 이루어진 목록을 표시한다.
<dl>로 크게 묶고, <dt>가 제목이 되며 하나 이상의 <dd>로 그에 대한 설명을 표기한다.
<dd>는 자동 들여쓰기가 된다.
1 2 3 4 5 6 7 8 9 | thtm<h1>제주 올레 </h1> <dl> <dt>올레 1코스</dt> <dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd> <dd>거리 : 14.6km(4~5시간)</dd> <dt>올레 2코스</dt> <dd>코스 : 광치기 해변 - 온평 포구</dd> <dd>거리 : 14.5km(4~5시간)</dd> </dl> | cs |
