HTML5, <dl> <dt> <dd> 태그 알아 보기

HTML/HTML 기초
2020. 8. 2.

<ol>, <ul>, <li> 태그들이 목록을 단순 열거 또는 정의할 때 쓰였다는 것은 이미 배웠습니다.

<dl>, <dt>, <dd> 태그들 역시 목록을 정의할 때 쓰이지만, 다른 점이 있다면 이 경우에는 사전이 특정 단어의 뜻을 풀어쓰는 것처럼 단어에 대한 그 의미를 정의할 경우에 쓰이는 목록이라는 점입니다.

- <dl> : Definition List의 약자이며 정의 목록을 말합니다. 주로 정의 목록의 시작점과 끝점에 쓰입니다.

- <dt> : Definition Term의 약자이며 정의할 용어를 말합니다. 그 의미를 알아야 할 단어 또는 용어 등을 의미합니다.

- <dd> : Definition Description의 약자이며 용어의 설명 또는 그 의미 해석을 말합니다.

위의 내용을 예제화한 내용의 코드는 아래와 같습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
  <dl>
<dt>dl</dt>
<dd> : Definition List의 약자이며 정의 목록을 말합니다. 
주로 정의 목록의 시작점과 끝점에 쓰입니다.</dd>
<dt>dt</dt>
<dd> : Definition Term의 약자이며 정의할 용어를 말합니다. 
그 의미를 알아야 할 단어 또는 용어 등을 의미합니다.</dd>
<dt>dd</dt>
<dd> : Definition Description의 약자이며 용어의 설명 또는 그 의미 해석을 말합니다.</dd>
</dl>
  </body>
</html>

위의 코드 블록 내용중 body 부분을 나타내면 아래와 같습니다.

dl

: Definition List의 약자이며 정의 목록을 말합니다. 주로 정의 목록의 시작점과 끝점에 쓰입니다.

dt

: Definition Term의 약자이며 정의할 용어를 말합니다. 그 의미를 알아야 할 단어 또는 용어 등을 의미합니다.

dd

: Definition Description의 약자이며 용어의 설명 또는 그 의미 해석을 말합니다.

<dl> 태그는 항상 </dl> 태그를 이용해 끝부분을 선언해 주어야 하지만, <dt>와 <dd> 태그는 닫는 태그인 </dt>와 </dd>를 생략해도 무방합니다. 닫는 태그를 생략할 경우에 아래와 같은 모습을 가지게 됩니다.

<dl>
<dt>dl
<dd> : Definition List의 약자이며 정의 목록을 말합니다. 
주로 정의 목록의 시작점과 끝점에 쓰입니다.
<dt>dt
<dd> : Definition Term의 약자이며 정의할 용어를 말합니다. 
그 의미를 알아야 할 단어 또는 용어 등을 의미합니다.
<dt>dd
<dd> : Definition Description의 약자이며 용어의 설명 또는 그 의미 해석을 말합니다.
</dl>

보이는 모습은 아래와 같이 닫는 태그를 쓰고 안 쓰고의 차이가 없습니다.

dl

: Definition List의 약자이며 정의 목록을 말합니다. 주로 정의 목록의 시작점과 끝점에 쓰입니다.

dt

: Definition Term의 약자이며 정의할 용어를 말합니다. 그 의미를 알아야 할 단어 또는 용어 등을 의미합니다.

dd

: Definition Description의 약자이며 용어의 설명 또는 그 의미 해석을 말합니다.

저작자표시 비영리 변경금지

'HTML > HTML 기초' 카테고리의 다른 글

HTML5, 미디어 태그중 img 태그의 이해 (0)	2020.08.04
HTML5, <div> 태그에 관하여 알아 보기 (0)	2020.08.03
HTML5, <ol> 태그에 <ol type=""> 형식으로 속성 지정하기 (0)	2020.08.02
HTML5, <ol> <ul> <li> 태그 알아 보기 (0)	2020.08.02

IT ERROR FIX