<dl> : dl 태그는 하나의 단락에서 제목과 설명을 나눠서 작성하고자 할 경우에 사용되는 태그
<dt> : 제목을 표시
<dd> : 설명을 표시
하나의 dl 태그에 안에 여러개의 dt태그와 dd태그를 사용할 수 있음
<dt> : 제목을 표시
<dd> : 설명을 표시
하나의 dl 태그에 안에 여러개의 dt태그와 dd태그를 사용할 수 있음
티스토리 뷰
1. 개념
<dl> - 제목과 설명을 하나의 목록으로 만들기2. 태그
<dl>html5 코드
|
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 = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
1
<dl>
<dt> 제목1 </dt>
<dd> 제목1에 해당하는 설명 태그1 입니다. </dd>
<dd> 제목1에 해당하는 설명 태그2 입니다. </dd>
<dd> 제목1에 해당하는 설명 태그3 입니다. </dd>
</dl>
2
<dl>
<dt> 제목2 </dt>
<dd> 제목2에 해당하는 설명 태그 입니다. </dd>
<dt> 제목3 </dt>
<dd> 제목3에 해당하는 설명 태그 입니다. </dd>
</dl>
</body>
</html>
|
결과 화면
코드 설명
1
<dl><dt> ...... </dt></dl>
dt 태그를 이용해 제목1을 하나 넣고 나머지 부분에 dd 태그를 넣어서 설명하는 부분을 입력하였습니다.
그러면 위에 그림에서 보는 것과 같이 탭(tab)으로 한 칸을 들여쓰기 한 것처럼 들어가게 되고 제목 부분과 설명 부분이 표시된 것을 확인 하실 수 있습니다.
그러면 위에 그림에서 보는 것과 같이 탭(tab)으로 한 칸을 들여쓰기 한 것처럼 들어가게 되고 제목 부분과 설명 부분이 표시된 것을 확인 하실 수 있습니다.
2
<dl><dt> ...... </dt><dt> ...... </dt></dl>
하나의 dl 태그 안에는 제목을 표시하는 dt 태그가 하나만 있어야 하는 것은 아닙니다. dt 태그로 제목을 넣고 dl 태그로 설명을 표시하고 다시 dt 태그를 넣고 dd 태그로 설명을 넣는 것도 가능합니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] <caption>,<figcaption> - 표에다가 제목 만들어 표시 (0) | 2021.01.19 |
|---|---|
| [html5] <table>,<tr>,<td>,<th> - 일반적인 표 만들기 (0) | 2021.01.14 |
| [html5] <ol> - 순서 있는 목록 (0) | 2021.01.12 |
| [html5] <ul> - 순서가 없는 목록 만들기 (0) | 2021.01.01 |
| [html5] <mark> - 형광펜 효과 , <span> - 텍스트 영역 감싸 스타일 적용 (0) | 2020.12.31 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday