728x90
반응형
ul
- 순서 없는 리스트, unordered list
- type 속성 : disc(default), square, circle, none
ol
- 순서 있는 리스트, ordered list
- type 속성 : 1(default), a, A, i, I
- start 속성 : 값을 주면 해당 숫자부터 시작
dl
- 설명 있는 리스트, description list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트</title>
</head>
<body>
<h3># ul : 순서 없는 리스트, unordered list</h3>
<p>
type 속성 : disc(default), square, circle, none
</p>
<ul type="none">
<!-- list item -->
<li>콜라</li>
<li>웰치스</li>
<li>환타</li>
</ul>
<h3># ol : 순서 있는 리스트, ordered list</h3>
<p>
type 속성 : 1(default), a, A, i, I <br>
start 속성 : 값을 주면 해당 숫자부터 시작
</p>
<ol type="i" start="90">
<li>콜라</li>
<li>사이다</li>
<li>웰치스</li>
</ol>
<h3># dl : 설명 있는 리스트, description list</h3>
<dl>
<dt>콜라</dt>
<dd>검은색 단물.</dd>
<dt>붕어빵</dt>
<dd>붕어 모양으로 생긴 빵.</dd>
</dl>
<h1>List Example</h1>
<ol type="I">
<li>List Item 1
<ol type="a">
<li>Nested item 1.1</li>
<li>Nested item 1.2</li>
</ol>
</li>
<li>List Item 2
<ol>
<li>Nested item 2.1</li>
<li>Nested item 2.2
<ul type="circle">
<li>Nested item 2.2.1</li>
<li>Nested item 2.2.2
<ul type="square">
<li>Nested item 2.2.2.1</li>
<li>Nested item 2.2.2.2</li>
</ul>
</li>
<li>Nested item 2.2.3</li>
</ul>
</li>
<li>Nested item 2.3</li>
</ol>
</li>
<li>List Item 3
<ul type="disc">
<li>Nested item 3.1</li>
<li>Nested item 3.2</li>
<li>Nested item 3.3</li>
</ul>
</li>
</ol>
<dl>
<dt>COMP 249</dt>
<dd>Object-Oriented Programming Ⅱ.</dd>
<dt>Soen287</dt>
<dd>Web Programming.</dd>
</dl>
</body>
</html>728x90
반응형
'HTML' 카테고리의 다른 글
| [HTML] 입력 (0) | 2023.06.02 |
|---|---|
| [HTML] 표(table) (0) | 2023.06.02 |
| [HTML] 이미지 (0) | 2023.06.01 |
| [HTML] 링크 (0) | 2023.06.01 |
| [HTML] 속성(Attribute) (0) | 2023.06.01 |
