[html 태그] dl, dt, dd 태그 (정의형 목록)

2020/03/24 - [HTML] - [html 태그] ol, ul 태그 (목록 태그)

 

이 전에 포스팅 했던 ol, ul 등의 일반적인 목록형 태그 외에

정의형 목록을 나타내는 태그도 html 존재한다.

 

바로 dl 태그인데,

이 태그는 ol과 ul이 li태그와의 짝을 이루듯

 

dl태그도 하나 이상의 dt태그와 하나 이상의 dd 태그로 짝을 이룬다.

(!) 반드시 dl태그 안에는 dt, dd태그만 위치할 수 있다.

<dl>
   <dt></dt>
   <dd></dd>
</dl>

위와 같은 기본 구성을 담고있다.

 

1. <dl> 태그 (Definition List)

말 그대로 정의 목록을 나타내는 태그이다.

특정 용어에 대해 정의하는 제목과 그 제목에 대한 설명을 담는다.

기본적으로 block요소의 속성을 갖고 있다.

 

2. <dt> 태그 (Definition Term)

정의 되는 용어에 대한 제목을 나타낸다.

기본적으로 block요소의 속성을 갖고 있다.

 

3. <dd> 태그 (Definition Description)

정의된 제목에 대한 설명을 나타낸다.

기본적으로 block요소의 속성을 갖고 있다.

 

4. 정의형 목록 스타일

<dl>
   <dt>정의 제목</dt>
   <dd>정의 설명</dd>
</dl>

기본적으로 dt와 dd 태그를 따로 스타일을 주지 않고 출력을 하게되면

dd태그의 들여쓰기가 된 상태에서 출력이 된다.

 

그래서 원하는 화면을 만들기 위해서는

margin값을 조정하거나 float, display:inline-block 등 별도의 스타일을 추가해야한다.

 

 

또한 여러개의 dt태그와 하나의 dd태그의 구성,

하나의 dt태그와 여러개의 dd태그의 구성 등의 표현이 가능하다.

<dl>
   <dt>정의 제목1</dt>
   <dt>정의 제목2</dt>
   <dt>정의 제목3</dt>
   <dd>정의 설명</dd>
</dl>

<dl>
   <dt>정의 제목1</dt>
   <dt>정의 제목2</dt>
   <dt>정의 제목3</dt>
   <dd>정의 설명1</dd>
   <dd>정의 설명2</dd>
   <dd>정의 설명3</dd>
</dl>

<dl>
   <dt>정의 제목</dt>
   <dd>정의 설명1</dd>
   <dd>정의 설명2</dd>
   <dd>정의 설명3</dd>
</dl>