TIL 22. <dl>,< dt>, <dd> 테이블처럼 사용하기

<dl>,< dt>, <dd> 테이블처럼 사용하기!

1. 의미

1) dl : Description-List (기술 목차)

2) dt : Description-Term (기술하고자 하는 용어)

3) dd : Description-Description (용어에 대한 설명)

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

2. 특징

• <dl>은 반드시 하나 이상의 <dt>-<dd> 한 쌍으로 이루어진다.
  즉,<dt>-<dd>는 dl 안에서만 사용가능하며, 독립적으로 사용이 불가하다.
  cf.

  -
  1. (순서있는 목록)/
     ,
     • (순서없는 목록)와 비슷한 구조이지만
       사용 목적이 다르다.

     • dt는 하나 이상의 dd를 형제 요소로 가질 수 있으며
       <dt>-<dt>-<dd>처럼 dt도 하나이상 연속으로 사용 가능.

     • <div>는 <dt>-<dd> 쌍을 감쌀 때 쓸 수 있지만,
       <dt>-<dd>의 형제 요소여서는 안 된다.

     • 반응형에서 줄바꿈 적용하는 방법이다.

       사용하면서 느낀점이 있다면 제목-설명처럼 정보간 상하관계 또는 부연설명이 필요한 단어에 사용하면 좋다고 생각한다.

       자료출처

     • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl