목록 태그
1. <ol> (Ordered List)
순서가 있는 목록을 표현할 때 사용한다. type 속성으로 글머리 기호를 변경할 수 있다.
2. <ul> (Unordered List)
순서가 없는 목록을 표현할 때 사용한다.
3. <li> Listed Item
목록하위 항목으로 사용되며, <ul> 태그 또는 <ol>태그의 하위에 위치한다.
4. <dl> (Definition List)
Definition List(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만든다.
ex) A는 B이다. 와 같은 Key = Value로 사용할 때 유용
5. <dt> (Definition Term)
Definition Term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용
6. <dd> (Definition Description)
Definition Description(정의 설명)의 약자로, 용어를 설명하는 데 사용
주의 사항
- <dl> 태그는 하나 이상의 <dt>-<dd> 쌍의 태그를 가져야 한다.
- 단, <dt>-<dd> 태그가 반드시 하나의 짝으로 지어져야 하는 것은 아니다.
- <li>, <dt>-<dd> 태그는 밖에서 독립적으로 사용할 수 없다.
- <ul> 태그 하위요소로는 <li>태그가 위치해야 한다.
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Tag</title>
</head>
<body>
<h1>김치볶음밥</h1>
<ol>
<li>프라이팬을 살짝 달군 뒤 식용유(혹은 들기름, 버터)를 두른다.</li>
<li>프라이팬의 온도가 적당히 올라가면 계란을 깨서 넣는다.</li>
<li>타지 않도록 최대한 주의한다.</li>
<li>취향에 맞추어 뒤집으면서 굽는다.</li>
<li>취향에 따라 소금 등의 조미료나 향신료를 넣는다.</li>
<li>익었으면 꺼내서 접시에 담는다.</li>
</ol>
<hr>
<h1>헬스 3대 운동</h1>
<ul>
<li>벤치브레스</li>
<li>데드리프트</li>
<li>스쿼트</li>
</ul>
<hr>
<h1>웹 개발 입문 과목</h1>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language <br>약자로 웹 문서를 만들기 위한 <strong>마크업 언어</strong>이다. </dd>
<dt>CSS</dt>
<dd>CasCading Style Sheet의 <br>약자로 HTML을 꾸미는 스타일 시트이다.</dd>
<dt>javaScript</dt>
<dd>웹 페이지를 생동감 있게 동작시키기 위한 <br><b>프로그래밍</b> 언어이다.</dd>
</dl>
</body>
</html>
'🌠Development > html, css' 카테고리의 다른 글
| [html] Font Tag (글꼴 태그, <i> vs <em>, <b> vs <strong> 차이) (0) | 2025.01.31 |
|---|---|
| [html] Emmet (0) | 2025.01.31 |
| [html] 태그 종류 (0) | 2025.01.29 |
| [html] 기본 구조 (0) | 2025.01.29 |