dl(Description List)요소의 용법이 헷갈립니다.

조회수 2909회

HTML dl 요소는 (or HTML Description List Element) 는 여러 짝의 용어와 정의를 둘러쌉니다. 이 요소의 일반적인 용법은 어휘를 구현하거나 메타데이터(키-값 짝의 목록)을 표시하는 것입니다.

dl 요소의 개요를 보면 위와 같이 서술되어 있는데, 제가 이해한 용법은 '단어 또는 용어(명사)에 대한 설명을 제공하는 컨텐츠에 사용한다' 인데,

<dl> <!-- 용어에 대한 정의 컨텐츠 -->
    <dt>hashcode</dt>
    <dd>해시 함수의 출력 비트 문자열</dd>
</dl>

위의 용법에 제한되어 있지 않고, 단순히 어느 것(something)에 대해 설명, 풀이, 또는 소개를 하는 컨텐츠라면 사용할 수 있는 건가요?

<dl> <!-- 특정 내용에 대한 소개 컨텐츠 -->
    <dt>코딩을 공부하는 방법</dt>
    <dd>매일 같이 한다</dd>
    <dd>보기 보단 실제로 해본다</dd>
</dl>

 <dl> <!-- Q&A 컨텐츠 -->
    <dt>Q)반품을 하려면 어떻게 해야 하나요?</dt>
    <dd>A)고객센터에 전화하여 접수한 후 안내에 따라 반품을 진행하시면 됩니다</dd>
 </dl>

<dl> <!-- 공지사항 컨텐츠 -->
    <dt>공지사항</dt>
    <dd>이벤트 당첨 안내</dd>
    <dd>이벤트 신청 안내</dd>
</dl>
  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • 안녕하세요 야무입니다. :-D

    W3C HTML5 표준 기술문서의 예시를 살펴보면 어떤 경우에 사용하면 좋을지 이해하기 좋습니다. 함께 살펴봅시다. :-)

    예제 1.

    블랑코 데킬라(Blanco tequila)와 레포사도 데킬라(Reposado tequila)와 같은 데킬라 주류에 대한 간단한 설명 목록을 구조화 한 결과를 볼 수 있습니다. 예제를 살펴보면 언급하신 '용어에 대한 정의 컨텐츠', 'Q&A 컨텐츠'에 해당됩니다.

    용어 - 설명 그룹 (a term-description group)

    <dl>
    
      <dt>Blanco tequila</dt>
      <dd>The purest form of the blue agave spirit...</dd>
    
      <dt>Reposado tequila</dt>
      <dd>Typically aged in wooden barrels for between two and eleven months...</dd>
    
    </dl>
    

    예제 2.

    록 밴드 퀸(Queen)에 대한 정보를 멤버(Members) 별, 레코드 레이블(Record Labels)로 구분하여 설명한 목록입니다. 예제를 살펴보면 언급하신 '특정 내용에 대한 소개 컨텐츠' 또한 <dl> 로 구조화할 수 있다는 사실을 확인할 수 있습니다.

    ※ 참고로 EMI(Electric and Musical Industries) 그룹은 영국의 레코드 레이블 그룹이자 한때 세계 4대 메이저 레이블로 손꼽힐 정도로 유명합니다.

    용어 - 설명 그룹 (The order of term-description groups)

    <p>Information about the rock band Queen:</p>
    
    <dl>
    
      <dt>Members</dt>
      <dd>Brian May</dd>
      <dd>Freddie Mercury</dd>
      <dd>John Deacon</dd>
      <dd>Roger Taylor</dd>
    
      <dt>Record labels</dt>
      <dd>EMI</dd>
      <dd>Parlophone</dd>
      <dd>Capitol</dd>
      <dd>Hollywood</dd>
      <dd>Island</dd>
    
    </dl>
    

    예제 3.

    '명령어 순서를 나열'하는데도 <dl> 요소를 사용해 구조화할 수 있습니다. 이해를 돕기 위해 콘텐츠를 번역했습니다. 문장 구문을 살펴보면 JavaScript 조건문 (if ~ else)을 문장으로 나열한 것입니다. 이와 같은 경우에도 설명 목록을 사용할 수 있습니다.

    <p>승점(victory points)을 다음과 같이 결정합니다.<br>
    (다음 유형 중 첫 번째로 일치하는 경우만 해당됩니다)</p>
    
    <dl>
    
       <dt>금화가 정확히 5개인 경우</dt>
       <dd>승점 5 점 획득</dd>
    
       <dt>금화가 하나 이상 있고, 은색 동전이 하나 이상 있는 경우</dt>
       <dd>승점 2 점 획득</dd>
    
       <dt>은색 동전이 하나 이상 있는 경우</dt>
       <dd>승점 1 점 획득</dd>
    
       <dt>그렇지 않으면</dt>
       <dd>승점을 얻지 못합니다.</dd>
    
    </dl>
    

    변경 사항 검토

    HTML 5.2 표준 문서에서 거론된 예시는 아니지만 <dt>, <dd> 요소를 하나 이상 감싸는 <div> 요소를 <dl> 내부에 구성할 수 있습니다. 참고로 <dl> 내에 사용 되는 <div> 요소는 하나 이상의 <dt>, <dd>를 감싸는 용도로만 사용할 수 있습니다. 그리고 <div><dt>, <dd> 요소는 형제 노드여서는 안됩니다.

    <p>승점(victory points)을 다음과 같이 결정합니다.<br>
    (다음 유형 중 첫 번째로 일치하는 경우만 해당됩니다)</p>
    
    <dl>
    
       <div>
          <dt>금화가 정확히 5개인 경우</dt>
          <dd>승점 5 점 획득</dd>
       </div>
    
       <div>
          <dt>금화가 하나 이상 있고, 은색 동전이 하나 이상 있는 경우</dt>
          <dd>승점 2 점 획득</dd>
       </div>
    
       <div>
          <dt>은색 동전이 하나 이상 있는 경우</dt>
          <dd>승점 1 점 획득</dd>
       </div>
    
       <div>
          <dt>그렇지 않으면</dt>
          <dd>승점을 얻지 못합니다.</dd>
       </div>
    
    </dl>
    

    사용 시, 알아두어야 할 점

    다음은 <dl>, <dt>, <dd> 요소를 사용해 구조화 할 때 알아두어야 할 점을 나열한 것입니다.

    • <dl> 요소에 <dt> 또는 <dd> 자식 요소가 포함되지 않으면, 용어 설명 그룹이 아니게 됩니다.

    • <dl> 요소에 하나 이상의 공백이 아닌 텍스트 노드 하위 항목이 있거나, <dt>, <dd> 요소가 아닌 하위 항목이있는 경우 이러한 모든 텍스트 노드와 요소는 물론 해당 하위 항목도 모든 용어 설명 그룹의 일부를 구성할 수 없습니다. (<dt>, <dd> 요소 포함)

    • <dl> 요소가 1개 이상의 <dt> 요소를 포함 <dd> 요소는 포함하지 않은 경우, 설명 없는 용어 그룹입니다.

    • <dl> 요소가 1개 이상의 <dd> 요소를 포함 <dt> 요소는 포함하지 않은 경우, 용어 없는 설명 그룹입니다.

    • <dl> 요소의 첫번째 자식 요소가 <dd> 요소일 경우, 첫 번째 그룹은 연관된 용어가 없게 됩니다.

    • <dl> 요소의 마지막 자식 요소가 <dt> 요소일 경우, 마지막 그룹은 연관된 설명이 없게 됩니다.

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)