[HTML] dl, dt, dd 태그

1 태그 정의

---

<dl>

• Description List
• 용어의 정의와 내용 설명이 필요할 때 사용하는 태그
• <dl>태그는 태그 단독으로 사용될 수 없다.
• <dt><dd>의 한 쌍으로 이루어진다.

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

<dt>

• Description Term
• 태그의 제목
• 인라인 요소 -> <li>, <ul>, <p> 등과 같은 블록 요소가 내부로 삽입될 수 없다.
• <dt><dt><dd>처럼 하나 이상 연속으로 사용 가능하다.

 

<dd>

• Description Description
• <dt>태그의 용어를 설명
• 기본적으로 들여쓰기(margin-left)가 설정되어있다.

<dd> 태그는 margin-left:40px가 기본값으로 설정되어있다.

• 블록 요소 -> 다른 태그들을 자유롭게 삽입할 수 있다.
• 하나 이상의 <dd>를 형제 요소로 가질 수 있다

 

2 태그 활용

<dt>와 <dd>태그를 가로 정렬시킬 수 있다.

---

html :

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

css :

<style>
        dl{
            display: flex;
        }
        dd{
            margin-left:10px;
        }
</style>

결과값 :

※ float를 통해서도 가로로 정렬시켜줄 수 있다.

 

 

 

참고

HTML dl dt dd 태그의 다양한 경우의 수 및 디자인 효과 - dAsImA

 

[html/css] dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기