software

‘<dl>’에 대하여 (2021)

발행: (2026년 5월 23일 PM 10:03 GMT+9)
9 분 소요
원문: Hacker News

출처: Hacker News

Introduction


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

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

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

## The Anatomy of a Description List

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

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

먼저 `` 로 시작합니다. 이것이 *description list*이며, [주석 1](#fn-1)에서 보듯 무순서 리스트에 `<ul>`을 쓰는 것, 순서 리스트에 `<ol>`을 쓰는 것과 같은 역할을 합니다.

> 
> Fancy.
> 

다음으로 이름‑값 쌍을 추가합니다. 이름에는 *description term*을 의미하는 `` 를, 값에는 *description detail*을 의미하는 `` 를 사용합니다.[주석 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>

가장 기본적인 사용 사례를 위해 살펴볼 마지막 요소는 스타일링을 위해 와 그(들)을 감싸고 싶을 때입니다.

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

<dl>
  <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>
</dl>

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

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

Why Do We Need Semantics For This Anyways?

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

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

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

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

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

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

답은 다양합니다. 저는 웹 접근성을 강력히 옹호하기 때문에 가장 먼저 떠오르는 생각은 스크린리더가 이 패턴을 어떻게 해석할 수 있느냐입니다. 즉석에서 생각해볼 수 있는 몇 가지 이점은 다음과 같습니다:

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

이러한 기능들은 각각의 이름과 값을 단순 텍스트 노드로만 처리하는 중첩 “ 시리즈보다 리스트를 훨씬 더 사용하기 쉽게 만듭니다.

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

실제로 이러한 스크린리더 경험은 가설이 아니라, 대부분의 브라우저/스크린리더 조합에서 을 사용할 때 실제로 얻을 수 있는 혜택입니다([관련 자료](httpshttps://a11ysupport.io/tech/html/dl_element)). 다만 현재 요소에 대한 지원이 아직 보편적이지는 않다는 점을 인정합니다. 경우에 따라서는 스크린리더가 리스트를 독립적인 텍스트 노드로 처리하는 fallback 경험이 충분하지 않을 수 있으며, 지원이 개선될 때까지 <div> 같은 대안을 사용할 수도 있습니다.

Okay, Okay, One Last Example!

제가 가장 좋아하는 예시는 Dungeons & Dragons 스탯 블록입니다. 이 블록은 사실상 “오! 이름‑값 쌍이 전부다!” 라는 말이 딱 맞습니다.

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

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

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

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

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

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

  <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>

  <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>

  <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>

<h2>Actions</h2>

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

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

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

제가 이 예시를 좋아하는 이유는 description list 패턴이 얼마나 다재다능한지를 직접 보여주기 때문입니다 — 능력치 리스트와 공격 리스트는 겉보기엔 전혀

0 조회
#software #programming #tech-trends
원문 보기
Share:
Back to Blog

관련 글

더 보기 »