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

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

오늘은 정의형요소 dl요소와 dt, dd요소에 대해서 포스팅 하겠습니다.

 

<dl>요소는 description list

<dt>요소는 description term

<dd>요소는 description description의 약자인데요.

 

<dl>요소는 <dt>로 지정된 용어와 그에대한 설명을 나타내는 <dd>요소로 구성 됩니다.

 

사전을 예로 들으면 좀 쉬울까요?

사전에 정의된 제목을 dt로 그에대한 설명을 dd요소로 넣을 수 있겠죠

 

 

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

 

1. 하나의 항목에 두개의 값

이름-값 그룹을 나타내며 "Authors"에 대한 값으로 "John"과 "Luke"가 포함되어 있습니다.

"Editor"에 대한 값은 "Frank"입니다. 

이 예제에서는 목록의 순서가 중요하며, "Authors"의 이름에 대한 값은 "John"과 "Luke"가 순서대로 나오게 됩니다.

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

 

 

 

2. 하나의 정의에 두개의 용어

이 예제에서는 "color"와 "colour"라는 두 용어가 "A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view"라는 정의에 연결되어 있습니다.

두 용어는 서로 다른 언어(미국 영어 및 영국 영어)로 표현되어 있고

HTML에서 <dfn>(Definition) 요소는 용어나 정의를 정의할 때 사용되는 요소입니다.

따라서 <dfn>으로 둘러싸인 "color"와 "colour"는 공통된 정의에 속하는 용어들을 나타냅니다.

맥락상에서 두 용어는 같은 정의에 "연결"되어 있으며, 해당 정의는 <dd> 요소에 나타나 있습니다.

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

 

3. 메타데이터 마크업

하나의 그룹이 두 개의 메타데이터 레이블("Authors" 및 "Editors")과

두 개의 값("Robert Rothman" 및 "Daniel Jackson")을 가지고 있습니다.

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

이 예제에서는 "Last modified time" 및 "Recommended update interval"과 같은 메타데이터를 정의하고 있습니다. "Authors" 및 "Editors"에 대한 정보는 같은 그룹 내에서 나열되어 있으며, div 요소는 그룹을 묶어서 스타일링을 돕습니다.

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

 

4. dl 지침을 제공하는데 사용되는 요소

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

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

<p>다음과 같이 승점을 결정하세요 (첫 번째 일치하는 경우 사용):</p>
<dl>
  <dt>만약 정확히 다섯 개의 금 동전이 있다면</dt>
  <dd>다섯 개의 승점을 얻습니다</dd>
  <dt>하나 이상의 금 동전과 하나 이상의 은 동전이 있다면</dt>
  <dd>두 개의 승점을 얻습니다</dd>
  <dt>하나 이상의 은 동전이 있다면</dt>
  <dd>하나의 승점을 얻습니다</dd>
  <dt>그 외의 경우</dt>
  <dd>어떠한 승점도 얻지 못합니다</dd>
</dl>

 

5. dl요소를 주석으로 사용, dfn정의되는 단어를 나타내기 위해 사용

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

dt 요소 자체는 dl 요소 내에서 사용될 때 그 내용이 정의되는 용어임을 나타내지 않습니다.

그러나 이를 나타내기 위해 dfn 요소를 사용할 수 있습니다.

dfn 요소는 정의되는 용어를 나타내는 데 사용되며,

이를 통해 화면 판독기 등이 용어의 의미를 더 잘 이해할 수 있게 됩니다.

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

 

6. 마이크로데이터 속성을 사용

이 예제는 dl 요소와 함께 microdata 속성을 사용하여 프랑스 레스토랑에서 판매되는 아이스크림 디저트를

주석 처리하는 데 div 요소를 사용합니다.

이 코드는 각각의 아이스크림 디저트에 대한 정보를 포함하며,

microdata 속성을 사용하여 스키마.org(Product 및 Offer)에서 정의한 속성들을 추가합니다.

이렇게 함으로써 검색 엔진이나 다른 소프트웨어가 데이터를 더 잘 이해하고 해석할 수 있게 됩니다.

스키마.org(Schema.org)는 구조화된 데이터를 정의하기 위한 공동 협력 프로젝트입니다. 

이는 주로 웹 상에서의 정보 검색을 위해 구조화된 데이터를 제공하는 데 사용됩니다. 

스키마.org에서는 웹페이지의 콘텐츠를 더 잘 이해하고 해석할 수 있도록 하기 위한 

표준화된 데이터 마크업을 제공합니다.

여기서 언급된 "Product" 및 "Offer"는 스키마.org에서 제공하는 일반적인 유형 중 일부입니다. 

"Product"은 어떤 종류의 제품이나 상품을 나타내며, 

"Offer"는 제품에 대한 구매 또는 제안에 대한 정보를 나타냅니다. 

이러한 유형은 구조화된 데이터를 표현하고 

검색 엔진이나 다른 소프트웨어가 웹상의 정보를 이해하고 효과적으로 활용할 수 있도록 도와줍니다.

<dl>
 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Café ou Chocolat Liégeois
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly
 </div>

 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Américaine
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
 </div>
</dl>

<!-- div요소 없이 itemref 속성을 사용하여 dd 요소의 데이터를 item과 연결, 더욱 명시적 -->
<dl>
 <dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
  <span itemprop="name">Café ou Chocolat Liégeois</span>
 <dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="1-description" itemprop="description">
  2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly

 <dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
  <span itemprop="name">Américaine</span>
 <dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="2-description" itemprop="description">
  1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
</dl>

 

7. dt로 질문요소, dd로 답변요소를 사용하여 FAQ목록 가능

이렇게 하면 FAQ 섹션을 만들어 각 질문과 답변을 목록으로 표시할 수 있습니다.

dt 요소는 질문을 나타내며, dd 요소는 해당 질문에 대한 답변을 나타냅니다.

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

 

8. 사전처럼 어휘목록을 정의하는데 사용

이 예제에서 dl은 사전과 같이 어휘 목록을 정의하는 데 사용됩니다. 

각 항목은 dfn을 가진 dt로 표시되며, 정의의 여러 부분을 보여주는 여러 개의 dd가 있습니다.

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/ˈhæpinəs/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

 

 

9. <dl>(정의 목록) 요소는 대화를 마크업하는 데 적합하지 않음.

각 화자의 대화는 스타일링을 위한 클래스가 있는 <div>로 둘러싸여 있습니다.

HTML 구조는 스타일링 및 레이아웃 요구에 기반하여 조정할 수 있습니다.

콘텐츠와 그 구조를 가장 잘 나타내는 의미적 HTML 요소를 사용하세요.

대화가 기사나 섹션 내의 대화를 나타내는 경우

<article>이나 <section> 요소를 사용하여 마크업에 의미를 더할 수도 있습니다.

<div class="speaker">
  <p><strong>존:</strong> 오늘 기분 어때?</p>
</div>

<div class="speaker">
  <p><strong>메리:</strong> 괜찮아, 고마워! 너는 어때?</p>
</div>

<div class="speaker">
  <p><strong>존:</strong> 나도 괜찮아, 물어봐줘서 고마워.</p>
</div>

 

 

 

 

 

 

출처 

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

HTML Standard