태그 |
설명 |
<ul> |
순서가 없는 목록을 만든다. |
<ol> |
순서가 있는 목록을 만든다. |
<li> |
<ul>, <ol>태그의 항목을 만든다. |
<ul>태그
번호 대신 점을 찍어 항목을 구분할 수 있도록 하는 태그이다.
<ul>태그의 항목엔 기본적으로 검은 원 모양의 글머리 기호가 표시된다.
태그 속성 |
설명 |
<ul type="disc"> |
글머리 기호로 검은 원 모양을 사용한다. |
<ul type="circle"> |
글머리 기호로 하얀 원 모양을 사용한다. |
<ul type="square"> |
글머리 기호로 검은 직사각형 모양을 사용한다. |
* HTML5 부터는 지원하지 않는 속성이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <title>목록 태그</title> <meta charset="utf-8"> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Juice</li> </ul> </body> </html> | cs |
+) 목록 태그 안에 목록 태그가 중첩되어 올 수도 있다. 이 경우 글 머리 기호가 disc->circle->square 순으로 순차적으로 나타난다.
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> <head> <title>목록 태그</title> <meta charset="utf-8"> </head> <body> <ul> <li>Coffee</li> <ul> <li>Americano</li> <li>Espresso</li> <li>latte</li> <ul> <li>Cafe latte</li> <li>Tea Latte</li> </ul> </ul> <li>Tea</li> <li>Juice</li> </ul> </body> </html> | cs |
<ol>태그
점 대신 숫자나 알파벳을 이용해 항목을 구분하도록 하는 태그이다.
목록의 항목은 기본적으로 숫자로 표시된다.
태그 속성 |
설명 |
<ol start="숫자"> |
항목의 시작 숫자를 지정한다. |
<ol type="1/A/a/I/i"> |
항목에서 사용할 머리 기호의 종류를 변경한다. |
<ol reversed> |
항목의 순서를 역순으로 표시한다. ex)10->9->8->7... |
* <ul>태그와는 다르게 이 속성들은 HTML5에서 모두 사용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <title>목록 태그</title> <meta charset="utf-8"> </head> <body> <ol> <li>Americano</li> <li>Espresso</li> <li>latte</li> </ol> <ol start="10" type="A"> <li>Macchiato</li> <li>Cappuccino</li> <li>Mocha</li> </ol> </body> </html> | cs |
<dl>태그
각 용어에 대한 설명을 나타내거나 계층적인 구조로 나타낼 때 <dl>태그를 사용한다.
태그 |
설명 |
<dl> |
설명 목록을 정의한다. |
<dt> |
설명 목록의 용어를 정의한다. |
<dd> |
설명 목록의 각 용어를 설명한다. |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <title>목록 태그</title> <meta charset="utf-8"> </head> <body> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html> | cs |
'프로그래밍 > 웹표준' 카테고리의 다른 글
| 8. 문서 연결 태그 <a>태그 (0) | 2017.01.15 |
|---|---|
| 7. 이미지 삽입 태그 <img> (0) | 2017.01.13 |
| 5. 문단 정렬 태그 (0) | 2017.01.09 |
| 4. 제목을 나타내는 태그 <h1>~<h6> (0) | 2017.01.08 |
| 3. 시맨틱 요소와 시맨틱 웹 (0) | 2017.01.07 |
댓글,
