비밀리에

소개

이 요소는 **이름‑값 쌍의 목록**을 나타내는 데 사용됩니다. 이는 동시에 *엄청나게* 다재다능한 UI 패턴입니다. 예를 들어, 여러분은 이미 이런 레이아웃을 실제로 본 적이 있을 겁니다…

각 예시는 이름‑값 쌍의 목록(또는 여러 목록!)을 보여줍니다. 숙소 편의 시설을 설명하거나 월세 청구 항목을 나열하거나 기술 용어 사전에서 사용되는 경우도 있습니다. 이러한 경우 모두 `` 요소로 표현할 수 있는 후보입니다.

그럼 실제로는 어떻게 보일까요?

## description list의 구조

[](#the-anatomy-of-a-description-list)

저는 `` 라고 말했지만, 실제로는 세 개의 별도 요소인 ``, ``, 그리고 `` 를 의미합니다.

먼저 `` 로 시작합니다. 이것이 *description list*이며, [note 1](#fn-1) 무순 목록을 위한 `<ul>` 혹은 순서 목록을 위한 `<ol>`과 같은 역할을 합니다.

다음으로 이름‑값 쌍을 추가합니다. 이름에는 *description term*을 의미하는 `` 를, 값에는 *description detail*을 의미하는 `` 를 사용합니다.[note 2](#fn-2)

```html
<dt>Title</dt>
<dd>Designing with Web Standards</dd>

목록에 또 다른 이름‑값 쌍을 추가하려면 또 다른 와 를 넣습니다:

<dt>Title</dt>
<dd>Designing with Web Standards</dd>
<dt>Publisher</dt>
<dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>

하지만 — 하나의 용어에 여러 값이 있다면 어떻게 할까요? 예를 들어, 이 책에 저자가 여러 명이라면?

괜찮습니다! 하나의 가 여러 개의 를 가질 수 있습니다:

<dt>Title</dt>
<dd>Designing with Web Standards</dd>
<dt>Author</dt>
<dd>Jeffrey Zeldman</dd>
<dd>Ethan Marcotte</dd>
<dt>Publisher</dt>
<dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>

기본적인 사용 사례에서 마지막으로 살펴볼 부분은 스타일링을 위해 과 그(들)을 감싸고 싶을 때입니다.

이 경우, 사양은 과 그(들)을 “ 로 감싸는 것을 허용합니다:

<div>
  <dt>Title</dt>
  <dd>Designing with Web Standards</dd>
</div>

<div>
  <dt>Author</dt>
  <dd>Jeffrey Zeldman</dd>
  <dd>Ethan Marcotte</dd>
</div>

<div>
  <dt>Publisher</dt>
  <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</div>

이와 같은 래퍼 가/“ 그룹을 감쌀 수 있는 유일한 요소입니다.

이것이 전부입니다! 이것이 바로 description list의 구조이며, HTML이 이름‑값 그룹을 마크업하는 의미론적 방법입니다!

왜 이런 경우에 의미론이 필요할까요?

```, , 요소에 대해 배우기 전, 우리 팀은 이 패턴을 구현할 때 항상 중첩된 “ 를 사용했습니다. 그 모습은 대략 다음과 같았습니다:

<div>
  <div>Title</div>
  <div>Designing with Web Standards</div>
</div>

<div>
  <div>Author</div>
  <div>Jeffrey Zeldman</div>
  <div>Ethan Marcotte</div>
</div>

<div>
  <div>Publisher</div>
  <div>New Riders Pub; 3rd edition (October 19, 2009)</div>
</div>

책에 대한 모든 정보가 들어 있지 않나요? 그렇다면, 중첩된 “ 시리즈만으로도 충분히 작업을 수행할 수 있다면, 왜 이름‑값 그룹 목록에 의미론이 필요할까요?

패턴에 의미론적 요소가 적합한지 판단할 때, 저는 “컴퓨터가 이 패턴을 인식한다면 어떤 이점(이론적인 것까지도)을 얻을 수 있을까?” 라는 질문을 스스로에게 던집니다. 여기서는 브라우저가 이름‑값 그룹 목록을 인식한다면 어떤 이점을 얻을 수 있는지 살펴봅니다.

답은 다양합니다. 저는 웹 접근성을 옹호하는 데 많은 시간을 투자하기 때문에, 가장 먼저 떠오르는 생각은 스크린리더가 이 패턴을 어떻게 해석할 수 있느냐입니다. 머릿속에 떠오르는 몇 가지 이점은 다음과 같습니다:

• 스크린리더가 목록에 몇 개의 이름‑값 그룹이 있는지 사용자에게 알려줄 수 있습니다.
• 스크린리더가 사용자가 현재 목록의 어느 위치에 있는지 알려줄 수 있습니다.
• 스크린리더가 목록을 하나의 블록으로 취급해, 사용자가 관심이 없을 경우 전체를 건너뛸 수 있게 할 수 있습니다.

이러한 기능들은 각각의 이름과 값을 단순 텍스트 노드로만 취급하는 중첩된 “ 시리즈보다 훨씬 사용성이 높습니다.

사용자의 장치가 패턴을 인식함으로써 얻을 수 있는 이점이 몇 가지라도 떠오른다면, 그 패턴은 의미론을 부여할 강력한 후보가 됩니다.

참고로, 이러한 스크린리더 경험은 가설이 아니라 실제로 대부분의 브라우저/스크린리더 조합에서 요소를 사용했을 때 얻을 수 있는 이점입니다([a11ysupport.io](https://a11ysupport.io/tech/html/dl_element)). 다만, 아직 모든 브라우저가 요소를 완전히 지원하는 것은 아니므로, 지원이 개선될 때까지는 “ 같은 대체 요소를 사용할 수도 있습니다.

마지막 예시 하나 더!

제가 가장 좋아하는 예시는 Dungeons & Dragons 스탯 블록이며, 이는 사실상 “이름‑값 쌍만 가득한” 예시입니다.

진짜로, 이 스탯 블록만 보아도 몇 개의 “ 후보가 보이나요?

제가 직접 세어 본 결과 다섯 개의 description list가 가능했습니다. 아래는 제가 선택한 마크업 방식입니다:

<dl>
  <dt>Kobold</dt>
  <dd>Small humanoid (kobold), lawful evil</dd>
</dl>

<dl>
  <dt>Armor Class</dt>
  <dd>12</dd>

  <dt>Hit Points</dt>
  <dd>5 (2d6 - 2)</dd>

  <dt>Speed</dt>
  <dd>30 ft.</dd>
</dl>

<dl>
  <dt>STR</dt>
  <dd>7 (-2)</dd>
  <dt>DEX</dt>
  <dd>15 (+2)</dd>
  <dt>CON</dt>
  <dd>9 (-1)</dd>
  <dt>INT</dt>
  <dd>8 (-1)</dd>
  <dt>WIS</dt>
  <dd>7 (-2)</dd>
  <dt>CHA</dt>
  <dd>8 (–1)</dd>
</dl>

<dl>
  <dt>Senses</dt>
  <dd>Darkvision 60 ft.<br>Passive Perception 8</dd>

  <dt>Languages</dt>
  <dd>Common<br>Draconic</dd>

  <dt>Challenge</dt>
  <dd>1/8 (25 XP)</dd>
</dl>

<dl>
  <dt>Sunlight Sensitivity</dt>
  <dd>While in sunlight, the kobold has disadvantage on attack rolls, as well as on Wisdom (Perception) checks that rely on sight.</dd>

  <dt>Pack Tactics</dt>
  <dd>The kobold has advantage on an attack roll against a creature if at least one of the kobold's allies is within 5 ft. of the creature and the ally isn't incapacitated.</dd>
</dl>

## Actions

<dl>
  <dt>Dagger</dt>
  <dd><em>Melee Weapon Attack:</em> +4 to hit, reach 5 ft., one target. <em>Hit:</em> (1d4 + 2) piercing damage.</dd>

  <dt>Sling</dt>
  <dd><em>Ranged Weapon Attack:</em> +4 to hit, reach 30/120 ft., one target. <em>Hit:</em> (1d4 + 2) bludgeoning damage.</dd>
</dl>

이것은 스탯 블록을 마크업하는 한 가지 방법일 뿐입니다.

이 예시가 좋은 이유는 description list 패턴이 얼마나 다재다능한지를 보여주기 때문입니다 — 능력치 목록(STR, DEX 등)과 공격 목록은 전혀 다른 형태처럼 보이지만, 동일한 패턴으로 모두 표현할 수 있습니다.

정리

이름‑값 쌍(또는 경우에 따라 이름‑값 그룹) 목록은 그 다재다능함 때문에 웹 전반에 걸쳐 흔히 사용되는 패턴입니다. HTML