정의리스트 dl, dt, dd 태그

출처 : 위키백과

1. 정의형 목록이란?

정의형 목록은 용어와 그에 대한 설명을 짝지어 표현하는 목록입니다. 사전에서 단어와 그 뜻을 나열하는 방식과 유사하다.​

• <dl>: 정의형 목록을 감싸는 태그다.
• <dt>: 정의할 용어를 나타낸다.
• <dd>: 용어에 대한 설명을 제공한다.​

 

2. 기본 구조

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language의 약자로, 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일과 레이아웃을 지정하는 데 사용됩니다.</dd>
</dl>

 

3. 다양한 사용 사례

용어와 정리

<dl>
  <dt><dfn>HTML</dfn></dt>
  <dd>웹 페이지를 작성하는 데 사용되는 마크업 언어입니다.</dd>
  <dt><dfn>CSS</dfn></dt>
  <dd>웹 페이지의 스타일과 레이아웃을 지정하는 데 사용됩니다.</dd>
</dl>

용어를 강조하고 해당 용어의 의미를 설명할 때 dfn 태그를 추가로 사용하기도 한다.

명칭과 설명

<dl>
  <dt>해리 포터</dt>
  <dd>J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로, 마법사로서 모험을 겪는 소년입니다.</dd>
  <dt>루크 스카이워커</dt>
  <dd>'스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로, 제다이 기사로서 강력한 힘을 가진 인물입니다.</dd>
</dl>

 

주제와 세부 항목

<dl>
  <dt>여행 목적</dt>
  <dd>휴식, 관광, 탐험 등</dd>
  <dt>여행 기간</dt>
  <dd>짧은 여행 (1-3일), 중간 여행 (4-7일), 긴 여행 (8일 이상)</dd>
  <dt>여행 예산</dt>
  <dd>저예산, 중간 예산, 고예산</dd>
</dl>

질문과 답변

<dl>
  <dt>Q: 제품 구매 방법은 무엇인가요?</dt>
  <dd>A: 제품은 온라인 쇼핑몰 또는 오프라인 매장에서 구매하실 수 있습니다.</dd>
  <dt>Q: 제품 사용 방법은 무엇인가요?</dt>
  <dd>A: 제품 사용 방법은 설명서를 참고하거나 제조사 홈페이지에서 확인하실 수 있습니다.</dd>
</dl>

 

4. 복합적인 구조

<dl>
  <dt>회사명</dt>
  <dd>우리회사</dd>
  <dt>설립일</dt>
  <dd>2012년 7월 30일</dd>
  <dt>사업 분야</dt>
  <dd>사회적으로 유익한 가치의 창출</dd>
  <dt>전화번호</dt>
  <dd>02-1234-5678</dd>
  <dt>사업 소개</dt>
  <dd>모든 사람을 위한 코딩 학습서입니다.</dd>
</dl>

 

5. <div>를 활용한 스타일링

See the Pen Untitled by luckyzi (@luckyzi) on CodePen.

 

 

 

 

6. 네이버 정의리스트 사용 예시

 : 네이버와 다음 메인화면에서 정의리스트 태그를 사용하는 예시다.

네이버 메인화면의 더보기를 클릭한 상태

구글 익스텐션인 Web Developer를 사용해 CSS 모두 제거했다.
<ul> - <li> 관계가 아니라 <dl> - <dt> - <dd> 태그로 구조화 했음을 확인할 수 있다.

CSS를 제거한 네이버 메인화면

<dl>
  <dt>ㅂ-ㅅ</dt>
    <dd>밴드</dd>
    <dd>부동산</dd>
    <dd>스포츠</dd>
    <dd>시리즈</dd>
    <dd>시리즈온</dd>
  </dl>

다음도 비슷한 구조임을 확인할 수 있다.

 

다음 메인화면의 더보기를 클릭한 상태

CSS를 제거한 다음 메인화면

<dl>
  <dt>미디어</dt>
    <dd>뉴스 </dd>
    <dd>연예 </dd>
    <dd>스포츠 </dd>
    <dd>금융 </dd>
    <dd>부동산 </dd>
    <dd>자동차 </dd>
</dl>

 

6. 주의할 점

• <dl> 태그는 반드시 하나 이상의 <dt>와 <dd> 쌍을 포함해야 한다.
• <dt>와 <dd>는 <dl> 태그 내에서만 사용되어야 하며, 독립적으로 사용할 수 없다.
• <dt>는 하나 이상의 <dd>를 가질 수 있으며, 반대로 여러 <dt>가 하나의 <dd>를 공유할 수도 있다.
• 대화형 콘텐츠나 입력 폼 등에는 <dl> 태그를 사용하는 것이 적절하지 않을 수 있다. 이 경우 <fieldset>과 <legend> 태그를 사용하는 것이 더 적합하다.

 

정리

 : 정의리스트는 기본적으로 용어와 설명을 묶어서 나열하는 리스트다.
실제 서비스에서는 리스트 태그처럼 콘텐츠 카테고리를 구조화할 때 사용하기도 한다.
HTML5부터 정의 리스트는 용어 및 정의, 메타데이터 주제 및 값, 질문 및 답변, 이름과 값 등. 설명 리스트(Description List)를 정의할 때 사용하는 것으로 그 의미가 확장되었다. 

 

참고자료

• 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://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
• https://dribbles.tistory.com/4
• https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element