HTML dl, dt, dd

dl (HTML Description List Element) 여러 쌍의 정의된 용어 설명을 그룹짓는다. 

dt (HTML Definition Term Element) 정의 목록에서 용어를 구분한다. dl요소의 자식 엘리먼트로만 등장할수 있다. 

dd (HTML Description) 정의 목록요소에서 용어의 정의를 나타낸다.

<dl>은 <dt>,<dl>을 포함한다. 

하나의 용어(dt)와 하나의 정의 (dd) 

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>

여러개의 용어(dt)와 하나의 정의(dd)

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
</dl>

하나의 용어와(dt) 여러개의 정의(dd)

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>
</dl>

여러개의 용어(dt)와 여러개의 정의(dd)

<dl>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
</dl>

응용예)

<dl>
    <dt>워런티</dt>
    <dd>
        <img src="images/additional-info-icon-warranty-mo.png" alt="" width="48" height="48">
        <p>제품 등록 후 보증 정보를 확인하세요.</p>
        <a href="">더보기</a>
    </dd>
    
      
    
    <dt>윈도우 업데이트 정보</dt>
    <dd>
      <img src="images/additional-info-icon-window-mo.png" alt="" width="48" height="48">
      <ul>
          <li><a href="">Windows 10 업데이트 안내</a></li>
          <li><a href="">Windows 10 S 지원 모델 정보</a></li>
      </ul>
    </dd>
    
    <dt>Samsung Flow</dt>
    <!-- 이미지:  -->
    <dd>
      <img src="images/Home_addinfo_SamsungFlow.png" alt="" width="48" height="48">
      <p>PC 로그인, 모바일 핫스팟 연결 및 모바일 알림 동기화 기능을 간편하게 사용하실 수 있습니다.</p>
      <a href="">더 보기</a>
    </dd>
    
    <dt>뉴스 &amp; 공지사항</dt>
     <dd>
      <img src="images/additional-info-icon-alert-mo.png" alt="" width="48" height="48">
     <p>제품 및 서비스에 대한 공지사항</p>
     <a href=""></a>
     </dd>
  </dl>

dl, dt,  dd 는 설명하는 키(key)와 값(value)이 쌍으로 구성되는 콘텐츠인 경우 사용한다.

dl, dt, dd의 용법이 햇갈리는 경우 해당링크 참조한다. 

발췌 : 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dt

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dd

FastCampus 프론트엔드 강의