반응형
1. <dl>, <dt>, <dd> 태그란 무엇인가?
- <dl>...</dl> 태그는 description list(설명, 서술 목록) 으로 제목과 설명이 한쌍인 설명, 정의 목록을 만드는 태그이다.
- <dt>...</dt> 태그는 description term(용어의 제목) 으로 제목을 나타내는 태그이다. 줄바꿈 기능이 있다.
- <dd>...</dd> 태그는 description details(용어 설명) 으로 제목에 대한 설명을 나타내는 태그이다. 줄바꿈 기능 있다.
2. <dl><dt><dd>...</dd></dt></dl> 태그 사용 예시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정의 목록 태그에 대해 알아보자</title>
</head>
<body>
<p>dl 태그가 적용된 예시입니다.</p>
<dl>
<dt>정의 목록이란 무엇인가?</dt>
<dd>dl 태그는 제목과 설명이 한쌍으로 이루어진 태그인데요,<br>
dt 태그는 제목을 나타내고,<br>
dd 태그는 제목에 대한 구체적인 설명을 나타냅니다.
</dd>
</dl>
</body>
</html>
|
cs |
3. <dl><dt><dd>...</dd></dt></dl> 태그 사용 결과
4. <dl><dt><dd>...</dd></dt></dl> 태그 사용 예시2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정의 목록 태그에 대해 알아보자</title>
</head>
<p>대표 메뉴를 소개합니다.</p>
<dl>
<dt>떡볶이</dt>
<dd> 캡사이신을 넣지 않은 only 국내산 고춧가루로 매운맛을 내어,<br>
매콤하면서 달콤한 떡볶이입니다.<br>
떡은 치즈떡을 사용하여 매운맛을 중화시켜줍니다.<br>
우리집 대표 메뉴!!
</dd>
<dt>쫄면</dt>
<dd>매운맛 고수라면 누구든지 도전!!<br>
탱글탱글한 면에 아삭 야채 듬뿍!!<br>
사이드로 김밥도 드려요.
</dd>
</dl>
</body>
</html>
|
cs |
5. <dl><dt><dd>...</dd></dt></dl> 태그 사용 결과2
이렇게, 제목과 설명을 목록으로 노출하고자 할 때 사용되는 태그에 대해 알아보았다.
목록을 나타내는 태그인 <ul>, <ol> 과는 다르다는 것을 알 수 있는데,
<dl>, <dt>, <dd> 태그의 경우 제목과 함께 설명할 때 사용하고,
<ul>, <ol> 태그의 경우 목차/목록를 나타낼 때 사용한다 는 차이점이 있음을 알 수 있다.
반응형
'Programming Language > CSS' 카테고리의 다른 글
| [CSS] <li> 태그, <ol> 태그란? (list item, ordered list) (0) | 2022.01.18 |
|---|---|
| [CSS] <li> 태그, <ul> 태그란? (list item, unordered list) (0) | 2022.01.18 |
| [CSS] <span> 태그란? (0) | 2022.01.12 |
| [CSS] <div> 태그란? (division) (0) | 2022.01.12 |
| [CSS] CSS 스타일 적용 방법 (0) | 2022.01.11 |
댓글