[HTML] 목록 태그 <ul>, <ol>, <li>, <dl>, <dt>, <dd>
2021. 6. 19. 22:00
728x90
01 HTML 리스트 (List)
- 순서가 없는 리스트
(unordered list) - 순서가 있는 리스트
(ordered list) - 정의 리스트
(definition list)
02 순서가 없는 리스트(Unordered List)
- 순서가 없는 리스트 :
<ul> - 리스트 요소 :
<li> - 리스트 요소의 앞에 위치하는 숫자나 기호를
마커(marker)라고 함. - 리스트에 다양한 마커(marker)를 적용할 수 있음.
disc (●)circle (○)square (■)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>목록태그 - 순번이 없는 태그</h2>
<ul>
<li>순번이 없는 목록 태그 항목 - 1</li>
<li>순번이 없는 목록 태그 항목 - 2</li>
<li>순번이 없는 목록 태그 항목 - 3</li>
<li>순번이 없는 목록 태그 항목 - 4</li>
</ul>
<ul style="list-style-type: circle;">
<li>순번이 없는 목록 태그 항목 - 1</li>
<li>순번이 없는 목록 태그 항목 - 2</li>
<li>순번이 없는 목록 태그 항목 - 3</li>
<li>순번이 없는 목록 태그 항목 - 4</li>
</ul>
<ul style="list-style-type: square;">
<li>순번이 없는 목록 태그 항목 - 1</li>
<li>순번이 없는 목록 태그 항목 - 2</li>
<li>순번이 없는 목록 태그 항목 - 3</li>
<li>순번이 없는 목록 태그 항목 - 4</li>
</ul>
</body>
</html>
03 순서가 있는 리스트(Ordered List)
- 순서가 있는 리스트 :
<ol> - 리스트 요소 :
<li> - 리스트 요소의 앞에 위치하는 숫자나 기호를
마커(marker) 라고 함. - 리스트에 다양한 마커(marker)를 적용할 수 있음.
decimal (1,2,3...)upper-alpha (A,B,C...)lower-alpha (a,b,c...)upper-roman (로마숫자 대문자)lower-roman (로마숫자 소문자)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>목록태그 - 순번이 있는 태그</h2>
<ol>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
</ol>
<h2>목록태그 - 순번이 있는 태그</h2>
<ol style="list-style-type: upper-alpha;">
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
</ol>
<h2>목록태그 - 순번이 있는 태그</h2>
<ol style="list-style-type: lower-roman;">
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
</ol>
</body>
</html>
03-1 start를 통해 시작점을 설정할 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>목록태그 - 순번이 있는 태그</h2>
<ol start="5">
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
<li>순번이 있는 목록 태그 항목</li>
</ol>
</body>
</html>
04 정의 리스트(Description List)
- 정의를 모아 놓은 리스트 리스트 :
<dl> - 용어의 이름 :
<dt> - 용어에 대한 정의:
<dd>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록 태그</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>정의 목록 태그</h2>
<dl>
<dt>목록 제목</dt>
<dd>정의 내용 - 1</dd>
<dd>정의 내용 - 2</dd>
<dd>정의 내용 - 3</dd>
<dt>목록 제목</dt>
<dd>정의 내용 - 1</dd>
<dd>정의 내용 - 2</dd>
<dd>정의 내용 - 3</dd>
</dl>
</body>
</html>728x90
'HTML > Study' 카테고리의 다른 글
| [HTML] 하이퍼링크 태그 <a>, href, title, target (1) | 2021.06.21 |
|---|---|
| [HTML] 이미지 태그 <img>, src, alt / 멀티미디어 태그 <video>, <audio> (1) | 2021.06.21 |
| [HTML] 텍스트 태그 <br>, <b>, <strong>, <u>, <i>, <em>, <mark>, <hr> (1) | 2021.06.19 |
| [HTML] 텍스트 태그 <h1> ~ <h6>, <p>, <br>, <pre> (1) | 2021.06.19 |
| [HTML] !DOCTYPE html, html, head, meta, meta charset='utf-8', title, body (1) | 2021.06.19 |
