안녕하세요.
이번 포스팅은 목록을 표현하는 태그들에 대해 알아보겠습니다.
목록을 표현하는 태그는 <ol></ol>, <ul></ul>, <dl></dl> 태그가 있습니다.
각각 Ordered List, Unordered List, Definition List 를 의미합니다.
모두 목록을 표현할 때 사용하지만 쓰임이 다릅니다.
우선 <ol></ol>은 순서가 있는 목록을 만들 때 씁니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<ol>
<li>
첫 번째
</li>
<li>
두 번째
</li>
<li>
세 번째
</li>
</ol>
</body>
</html>
<ol></ol>과 <ul></ul>에서는 <li></li> 라는 태그를 이용해 목록의 각 항목을 표시합니다.
<ol></ol>은 순서가 있는 목록이기 때문에 위와 같이 번호가 각 목록 앞에 자동으로 생성됩니다.
<ul></ul>은 반대로 순서가 없는 목록을 만들 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<ul>
<li>
첫 번째
</li>
<li>
두 번째
</li>
<li>
세 번째
</li>
</ul>
</body>
</html>
<ol></ol> 태그와 <ul></ul> 태그는 중첩해서 표시할 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<ol>
<li>첫 번째</li>
<li>
두 번째
<ol>
<li>두 번째 중 첫 번째</li>
<li>두 번째 중 두 번째</li>
<li>두 번째 중 세 번째</li>
</ol>
</li>
<li>
세 번째
<ul>
<li>세 번째 중 첫 번째</li>
<li>세 번째 중 두 번째
<ol>
<li>세 번째 중 두 번째 중 첫 번째</li>
<li>세 번째 중 두 번째 중 두 번째</li>
</ol>
</li>
</ul>
</li>
</ol>
</body>
</html>
여기서 중첩된 <ol></ol> 혹은 <ul></ul> 태그는 상위 목록의 <li></li> 태그 안에 들어 있는 것을 확인해야 합니다.
<dl></dl> 태그는 사용이 조금 다릅니다.
<dl></dl> 태그는 어떤 용어에 대한 정의를 목록화 할 때 사용하며, <dt></dt>와 <dd></dd> 태그가 한 묶음으로 사용 됩니다.
<dt></dt> 태그는 Definition Title에서 온 것으로, 정의할 용어를 나타낼 때 사용합니다.
<dd></dd> 태그는 Definition Data의 약자로, 용어에 대한 정의를 나타낼 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<dl>
<dt>
하나의 용어와 하나의 정의
</dt>
<dd>
하나의 정의입니다.
</dd>
<dt>
하나의 용어와 여러 개의 정의
</dt>
<dd>
첫 번째 정의입니다.
</dd>
<dd>
두 번째 정의입니다.
</dd>
<dt>
여러 개의 용어와 하나의 정의 1/2
</dt>
<dt>
여러 개의 용어와 하나의 정의 2/2
</dt>
<dd>
하나의 정의입니다.
</dd>
</dl>
</body>
</html>
'Frontend 기본' 카테고리의 다른 글
| HTML 태그 - <img> (0) | 2022.08.08 |
|---|---|
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |
| HTML 시멘틱 태그 (0) | 2022.08.03 |
| HTML 태그 - <b>, <strong>, <i>, <em> (0) | 2022.08.02 |
| HTML 태그 - <h1>~<h6>, <p>, <br/> (0) | 2022.08.01 |