[HTML/CSS] dl dt dd 태그에 대해서 알아보자

오늘은 dl, dt, dd 태그에 대해 알아보려고 한다.

 

<dl> 태그는 용어의 정의와 내용 설명이 필요할 때 사용하는 태그이며, <dt> 태그는 제목을 의미한다.

또한, <dd> 태그는 내용 설명을 의미한다.

 

<dt> 제목과 <dd> 내용 파트는 서로 개수가 대응되지 않아도 괜찮지만,

제목과 내용이 1:1로 쌍을 이룰 때만 사용하는 것을 권장한다.

 

<dl>
	<dt>정의</dt>
	<dd>정의에 대한 설명값</dd>
</dl>

 

<dl>태그

정의가 필요한 목차를 설정할 때 사용하며, <dl> 태그 단독으로는 사용될 수 없다. 

<ol>, <ul> 태그가 <li> 태그와 결합되서 사용하듯, <dl> 태그는 <dt> 태그와 <dd> 태그와 결합해서 사용한다.

 

<dt>태그

용어의 정의를 나타내며, 인라인 요소이기 때문에 <li>, <ul>, <p> 등과 같은 블록 요소가 내부로 삽입될 수 없다.

 

<dd>태그

<dt> 태그의 용어를 설명하며, 기본적으로 들여쓰기가 설정되있다.

<dd> 태그는 블록 요소이기 때문에 <p>, <br>, <img>, <link>, <ul>, <ol>, <li> 등과

같은 블록 요소를 자유롭게 삽입할 수 있다.

 

<dt> 소수 + <dd> 다수

<dt> 태그 소수에 <dd> 태그 다수가 오는 구조도 가능하다.

 

<dt> 다수 + <dd> 소수

<dt> 태그 다수에 <dd> 태그 소수의 기입 형태도 가능하다.

 

<dt> 다수 + <dd> 소수

<dt> 태그 다수에 <dd> 태그 소수의 기입 형태도 가능하다.