정의형 목록요소 dl, dt, dd요소

안녕하세요 찐망고입니다.

오늘은 HTML에서 정의 목록을 만들 때 사용하는 dl, dt, dd 요소에 대해 알아볼까요?

 

정의 목록이란?

• <dl>: description list의 약자로, 정의 목록을 나타냅니다.
• <dt>: description term의 약자로, 정의할 항목(용어)을 나타냅니다.
• <dd>: description description의 약자로, 용어에 대한 설명을 나타냅니다.

사전을 예로 들으면 좀 쉬울까요? 사전에서 단어와 그 뜻을 나열하는 방식과 비슷합니다.

예를 들어, 사전에 "사과"라는 단어와 그 뜻을 설명하는 것처럼 말이죠.

 

 

dl 요소 안에 들어가는 dt와 dd의 구성은 다양한 방법이 가능합니다.

 

기본 사용법

먼저 기본적인 사용법을 간단한 예제로 살펴보겠습니다.

<dl>
  <dt>사과</dt>
  <dd>사과는 빨간색 또는 초록색의 과일로, 맛이 달고 상큼합니다.</dd>
  <dt>바나나</dt>
  <dd>바나나는 노란색의 길쭉한 과일로, 부드럽고 달콤한 맛이 납니다.</dd>
</dl>

 

예제에서는 "사과"와 "바나나"라는 용어를 <dt>로 정의하고, 그에 대한 설명을 <dd>로 작성했습니다.

 

여러 개의 값

하나의 항목에 여러 개의 값을 나타내는 방법도 있습니다. 예를 들어, 작가와 편집자를 정의할 때 사용합니다.

<dl>
  <dt>작가</dt>
  <dd>홍길동</dd>
  <dd>김철수</dd>
  <dt>편집자</dt>
  <dd>이영희</dd>
</dl>

 

여기서는 "작가"라는 용어에 두 개의 값(홍길동, 김철수)을, "편집자"라는 용어에 한 개의 값(이영희)을 정의했습니다.

 

 

하나의 정의에 여러 용어

같은 정의에 여러 용어를 연결할 수도 있습니다. 예를 들어, 미국 영어와 영국 영어의 색깔 정의를 보여줍니다.

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd>인간의 눈이 세 가지 다른 색의 빛을 인식할 수 있는 능력에서 비롯된 감각</dd>
</dl>

 

여기서는 "color"와 "colour"라는 두 용어가 같은 정의에 연결되어 있습니다.

 

 

메타데이터 마크업

하나의 그룹이 두 개의 메타데이터 레이블("작가" 및 "편집자")과 두 개의 값("홍길동" 및 "이영희")을 가지고 있습니다.

이 예제에서는 dt 및 dd 요소의 그룹을 둘러싸기 위해 div 요소를 사용하여 스타일링을 보조합니다.

"최종 수정 시간" 및 "권장 업데이트 간격"과 같은 메타데이터를 정의하고 있습니다. "작가" 및 "편집자"에 대한 정보는 같은 그룹 내에서 나열되어 있으며, div 요소는 그룹을 묶어서 스타일링을 돕습니다.

 

<dl>
    <div>
        <dt>최종 수정 시간</dt>
        <dd>2024-07-22T23:33Z</dd>
    </div>
    <div>
        <dt>권장 업데이트 간격</dt>
        <dd>60초</dd>
    </div>
    <div>
        <dt>작가</dt>
        <dd>홍길동</dd>
        <dt>편집자</dt>
        <dd>이영희</dd>
    </div>
</dl>

 

이 예제에서는 div 요소를 사용하여 dt와 dd 요소를 그룹화하여 스타일링을 적용했습니다.

이렇게 하면 각 메타데이터 항목을 별도로 스타일링할 수 있어 가독성이 향상됩니다.

 

게임규칙을 제공

dl 요소를 사용하여 일련의 지침을 제공하는 방법을 보여줍니다.

이 경우 지침의 순서가 중요합니다(다른 예제에서는 dt와 dd의 순서가 중요하지 않았습니다).

 

다음은 류미큐브 게임의 기본 규칙입니다.

<h1>류미큐브 게임 규칙</h1>
<p>다음과 같이 게임을 진행하세요 (순서가 중요합니다):</p>
<dl>
    <dt>1. 타일 섞기</dt>
    <dd>모든 타일을 뒤집어 섞은 후, 각 플레이어는 14개의 타일을 무작위로 뽑습니다.</dd>

    <dt>2. 초기 배열 만들기</dt>
    <dd>각 플레이어는 자신의 타일을 이용해 총합이 30 이상인 한 세트 또는 연속된 숫자의 그룹을 만들어야 합니다.</dd>

    <dt>3. 순서 진행</dt>
    <dd>각 플레이어는 자신의 차례에 타일을 추가하거나, 기존 타일을 재배열하여 새로운 그룹이나 세트를 만듭니다.</dd>

    <dt>4. 타일 추가</dt>
    <dd>플레이어는 자신의 타일을 기존의 그룹이나 세트에 추가할 수 있습니다.</dd>

    <dt>5. 타일 재배열</dt>
    <dd>플레이어는 기존의 그룹이나 세트를 재배열하여 새로운 유효한 조합을 만들 수 있습니다.</dd>

    <dt>6. 타일 뽑기</dt>
    <dd>자신의 차례에 유효한 움직임을 할 수 없는 경우, 타일을 하나 뽑아야 합니다.</dd>

    <dt>7. 게임 종료</dt>
    <dd>누군가 모든 타일을 사용하면 게임이 종료됩니다. 점수를 계산하여 가장 높은 점수를 가진 플레이어가 승리합니다.</dd>
</dl>

 

이 예제에서는 dl 요소를 사용하여 게임 규칙을 순서대로 나열하고,

각 규칙을 dt와 dd 요소로 구분하여 명확하게 제시했습니다.

이를 통해 플레이어가 게임 규칙을 쉽게 이해하고 따라갈 수 있도록 했습니다.

 

 

정의 목록을 용어집으로 사용하기

dl 요소는 주로 용어집으로 사용되며, 각 용어는 dfn 요소를 사용하여 정의할 수 있습니다.

dt 요소는 정의할 용어를 나타내고, dd 요소는 그에 대한 설명을 제공합니다.

dfn 요소는 정의되는 용어를 나타내며, 스크린리더기 등이 용어의 의미를 더 잘 이해할 수 있게 도와줍니다.

<h1>용어집</h1>
<dl>
    <dt><dfn>아파트</dfn>, 명사</dt>
    <dd>하나 이상의 스레드와 하나 이상의 COM 객체를 그룹화하는 실행 컨텍스트.</dd>

    <dt><dfn>펑크</dfn>, 명사</dt>
    <dd>공기가 빠진 타이어.</dd>

    <dt><dfn>홈</dfn>, 명사</dt>
    <dd>사용자의 로그인 디렉터리.</dd>
</dl>

 

이 예제에서는 dl, dt, dd, dfn 요소를 사용하여 용어집을 구성했습니다.

각 용어는 dfn 요소로 강조되어 있으며, 용어에 대한 설명은 dd 요소로 제공됩니다.

 

 

 

 

 

 

마이크로데이터와 스키마.org를 이용한 HTML 마크업

마이크로데이터(Microdata)는 HTML5에서 구조화된 데이터를 마크업하는 방법 중 하나입니다.

이를 사용하면 웹페이지의 콘텐츠를 검색 엔진이나 다른 소프트웨어가 더 잘 이해하고 해석할 수 있게 됩니다.

스키마.org(Schema.org)는 이러한 구조화된 데이터를 정의하는 표준을 제공하는 프로젝트입니다.

스키마.org란?

스키마.org는 웹페이지의 콘텐츠를 구조화하여 검색 엔진이나 다른 소프트웨어가 해당 콘텐츠를 더 잘 이해하고 활용할 수 있도록 도와주는 데이터 마크업 표준을 제공합니다. 예를 들어, 제품(Product)이나 제품에 대한 제안(Offer) 같은 데이터 타입을 정의합니다.

이 예제에서는 dl 요소와 함께 마이크로데이터 속성을 사용하여

프랑스 레스토랑에서 판매되는 아이스크림 디저트에 대한 정보를 마크업합니다.

이를 통해 검색 엔진이 이 정보를 더 잘 이해하고 검색 결과에 반영할 수 있습니다.

<h1>프랑스 레스토랑의 아이스크림 디저트</h1>
<dl>
    <div itemscope itemtype="http://schema.org/Product">
        <dt itemprop="name">Café ou Chocolat Liégeois</dt>
        <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">3.50</span>
            <data itemprop="priceCurrency" value="EUR">€</data>
        </dd>
        <dd itemprop="description">2개의 카페 또는 초콜릿 아이스크림 볼, 1개의 바닐라 아이스크림 볼, 카페 또는 초콜릿 소스, 휘핑크림</dd>
    </div>

    <div itemscope itemtype="http://schema.org/Product">
        <dt itemprop="name">Américaine</dt>
        <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">3.50</span>
            <data itemprop="priceCurrency" value="EUR">€</data>
        </dd>
        <dd itemprop="description">1개의 크렘 브륄레 아이스크림 볼, 1개의 바닐라 아이스크림 볼, 1개의 카라멜 아이스크림 볼, 휘핑크림</dd>
    </div>
</dl>

• itemscope와 itemtype: 마이크로데이터의 주요 속성으로, itemscope는 해당 요소가 독립적인 데이터 항목임을 나타내고, itemtype은 그 항목의 타입을 정의합니다.
• itemprop: 데이터 항목의 속성을 정의합니다. 예를 들어, name, price, description 등의 속성을 설정할 수 있습니다.
• schema.org/Product와 schema.org/Offer: 스키마.org에서 정의한 타입으로, 제품(Product)과 제안(Offer)에 대한 정보를 구조화합니다.

이 예제에서는 dl 요소와 div 요소를 사용하여 각 아이스크림 디저트의 이름, 가격, 설명을 구조화된 데이터로 마크업했습니다. 이렇게 하면 검색 엔진이 이 정보를 더 잘 이해하고 검색 결과에 반영할 수 있습니다.

 

 

FAQ 목록 만들기

FAQ(자주 묻는 질문) 섹션을 만들 때도 유용합니다.

<article>
  <h1>FAQ</h1>
  <dl>
    <dt>Q: 오늘 기분이 어떠세요?</dt>
    <dd>A: 매우 좋아요, 감사합니다!</dd>
    <dt>Q: HTML이 무엇인가요?</dt>
    <dd>A: HTML은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다.</dd>
  </dl>
</article>

 

 

정의 목록을 사용한 어휘 목록

이 예제에서는 dl 요소를 사용하여 사전과 같이 어휘 목록을 정의합니다.

각 항목은 dfn을 포함한 dt로 표시되며, 여러 개의 dd 요소를 사용하여 정의의 여러 부분을 보여줍니다.

<h1>어휘 목록</h1>
<dl>
    <dt><dfn>행복</dfn></dt>
    <dd class="pronunciation">/haengbok/</dd>
    <dd class="part-of-speech"><i><abbr>명사</abbr></i></dd>
    <dd>기쁘고 만족스러운 상태.</dd>
    <dd>행운; 성공. <q>아, <b>행복</b>이여! 성공했어!</q></dd>

    <dt><dfn>환희</dfn></dt>
    <dd class="pronunciation">/hwanhui/</dd>
    <dd class="part-of-speech"><i><abbr>동사</abbr></i> 자동사. 자신이 기뻐하다.</dd>
    <dd class="part-of-speech"><i><abbr>동사</abbr></i> 타동사. 남을 기쁘게 하다.</dd>
</dl>

 

• dl 요소: 정의 목록을 나타내며, 어휘와 그 정의를 나열합니다.
• dt 요소: 정의할 어휘를 나타냅니다. dfn 요소를 포함하여 정의되는 용어를 강조합니다.
• dd 요소: 어휘에 대한 발음, 품사, 정의 등을 나타냅니다.
• dfn 요소: 정의되는 용어를 나타내며, 화면 판독기 등이 용어의 의미를 더 잘 이해할 수 있게 도와줍니다.

이 예제에서는 dl, dt, dd, dfn 요소를 사용하여 어휘 목록을 구성했습니다.

각 어휘는 dfn 요소로 강조되어 있으며, 발음과 품사, 정의 등이 dd 요소로 제공됩니다.

 

 

대화 마크업 예제 - 정의형 목록으로는 적합하지 않음

아래는 각 화자의 대화를 div 요소로 스타일링하여 마크업하는 예제입니다.

이 예제는 article 요소를 사용하여 대화에 의미를 더합니다.

<article class="conversation">
    <h1>대화 예제</h1>
    <div class="speaker">
        <strong>존:</strong>
        <p>오늘 기분 어때?</p>
    </div>
    <div class="speaker">
        <strong>메리:</strong>
        <p>괜찮아, 고마워! 너는 어때?</p>
    </div>
    <div class="speaker">
        <strong>존:</strong>
        <p>나도 괜찮아, 물어봐줘서 고마워.</p>
    </div>
</article>

 

 

 

 

 

 

출처 

https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

HTML Standard