728x90
1. ul list (Unordered List) 순서가 없는 리스트
<h1>ul list</h1>
<ul>
<li>콩나물</li>
<li>파</li>
<li>국간장</li>
</ul>
<hr>
콩나물국에 들어가는 일부 재료를 나열한 리스트
각 재료는 나오는 순서가 바뀌어도 상관이 없기 때문에 이런 것은 순서가 없는 리스트로 표현 가능
ul을 선언한 후 그 안에 li를 사용해 각 항목을 나타냄
2. ol (Order List) 순서가 있는 리스트
<h1>ol list</h1>
<ol>
<li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵 (400ml) 만든다.</li>
<li>콩나물국을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
<li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
</ol>
<hr>
콩나물국을 끓이는 순서를 나열한 리스트.
이 순서는 바뀌면 안되기 때문에 순서가 있는 ol을 사용함
ul과 마찬가지로 li를 사용해 각 항목을 나타냄
3. dl (definition / description list) 태그
-용어와 그에 대한 정를 표현할 때 사용
-dl은 ul,ol과 구조가 다름
-ul, ol은 나욜하는 구조지만, dl은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어짐
<h1>dl list</h1>
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를 진실이라고 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인해 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>
<hr><br>
<dt>: 용어를 나타내는 태그 (definition term)
<dd>: 용어에 대한 정의 또는 설명을 나타내는 태그 (definition description)
*용어 하나에 여러 정의가 들어갈 때 <dd>를 한 개 이상 쓰는 것이 가능
예제: 리스트의 중첩
<!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>Document</title>
</head>
<body>
<h1>월드컵 조 편성</h1>
<ol>
<li>A
<ul>
<li>러시아</li>
<li>우르과이</li>
<li>이집트</li>
<li>사우디아라비아</li>
</ul>
</li>
<br>
<li>B
<ul>
<li>이란</li>
<li>스페인</li>
<li>포르투갈</li>
<li>모로코</li>
</ul>
</li>
<br>
<li>C
<ul>
<li>프랑스</li>
<li>덴마크</li>
<li>호주</li>
<li>페루</li>
</ul>
</li>
<br>
<li>D
<ul>
<li>크로아티아</li>
<li>아르헨티나</li>
<li>아이슬란드</li>
<li>나이지리아</li>
</ul>
</li>
</ol>
</body>
</html>
'HTML' 카테고리의 다른 글
| HTML10. IMG TAG (0) | 2023.02.07 |
|---|---|
| HTML08. CONTAINER (0) | 2023.02.07 |
| HTML07. a tag (0) | 2023.02.07 |
| HTML06. TEXT TAG (0) | 2023.02.07 |
| HTML05. TITLE & PARAGRAPH (0) | 2023.02.07 |
