TIL #17 : [HTML] dl, dt, dd tags

오늘은 dl, dt, dd 태그에 대해 알아 보겠습니다.

< dl > : The Description List

목록을 만드는 ul, ol과 다르게 dl 태그는 설명, 풀이, 소개를 하는 컨텐츠에 사용된다. 이 안에는 정의하는 용어 dt와 dt로 지정한 용어의 정의와 기타 관련 글인 dd가 있다. dl 태그 안에 하나 이상의 dt, dd 쌍이 있어야 하며 <div>,<dt>,<dd> 제외한 요소를 포함하면 안된다.

**자동으로 indent가 생긴다. margin으로 수정 가능하다.

사용하는 곳:

1. 용어 사전

• 하나의 용어와 하나의 정의

<p>Disney Characters:</p>

<dl>
    <dt>Judy</dt>
    <dd>A police officer from the movie <Zootopia></dd>

    <dt>Mulan</dt>
    <dd>A soldier from the movie <Mulan></dd>

    <dt>Ariel</dt>
    <dd>A mermaid from the movie <LittleMermaid></dd>
</dl>

• 여러개의 용어와 하나의 정의

<dl>
    <dt>Disney</dt>
    <dt>Disney Animations</dt>
    <dt>The Walt Disney Company</dt>
    <dd>The Walt Disney Company is an American diversified multinational mass media and entertainment conglomerate headquartered at the Walt Disney Studios complex in Burbank, California.</dd>
</dl>

*하나의 용어와 여러개의 정의

<dl>
    <dt>Disney</dt>
    <dd>The Walt Disney Company is an American diversified multinational mass media and entertainment conglomerate headquartered at the Walt Disney Studios complex in Burbank, California.</dd>
    <dd>Disney was originally founded on October 16, 1923, by brothers Walt and Roy O. Disney as the Disney Brothers Cartoon Studio; it also operated under the names The Walt Disney Studio and Walt Disney Productions before officially changing its name to The Walt Disney Company in 1986.</dd>
</dl>

2. 메타데이터(키-값 쌍)
   키-값으로 되어있는 정보를 나열할 때 유용하다.

<dl>
  <dt>Name</dt>
  <dd>Walt Disney</dd>
  <dt>Born</dt>
  <dd>1901</dd>
  <dt>Birthplace</dt>
  <dd>Chicago, Illinois, U.S.</dd>
  <dt>Board member of</dt>
  <dd>The Walt Disney Company (1923–1966)</dd>
</dl>

** dl 태그 안 각각의 이름-값 그룹(dt와 dd)를 div으로 감쌀 수 있다. 그러나 div와 dt,dd 요소는 형제 노드여서는 안된다. 마이크로데이터 사용, 그룹에 전역 특성 적용, 스타일 적용에 유용하다.

Reference
https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl
https://velog.io/@raram2/dl-dt-dd%EB%8A%94-%EC%96%B8%EC%A0%9C-%EC%93%B0%EB%8A%94-%EA%B1%B8%EA%B9%8C
https://hashcode.co.kr/questions/5358/dldescription-list%EC%9A%94%EC%86%8C%EC%9D%98-%EC%9A%A9%EB%B2%95%EC%9D%B4-%ED%97%B7%EA%B0%88%EB%A6%BD%EB%8B%88%EB%8B%A4
https://forum.freecodecamp.org/t/where-is-useful-or-better-than-ul-the-dl-dd-dt-tags/288625/2