<dl> 설명 목록 요소

HTML <dl> 요소는 설명 목록을 나타냅니다. <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

특성

이 요소는 전역 특성을 포함합니다.

접근성 고려사항

각각의 스크린 리더는 <dl>를 다르게 표현합니다. 즉, 총 아이템의 개수, 용어/정의 컨텍스트 및 탐색 방법등을 다르게 노출합니다. 이러한 차이가 반드시 버그는 아닙니다. iOS 14부터의 VoiceOver는 전체 읽기 멍령이 아닌 가상 커서 탐색 시, <dl> 콘텐츠가 목록임을 알립니다. VoiceOver는 <dl>를 이용한 목록 탐색을 지원하지 않습니다. ARIA 용어 및 정의 역할을 <dl> 구조에 적용하면 macOS 및 iOS에서 VoiceOver의 읽기 방식이 조정되므로 주의해야 합니다.

• iOS14에서의 VoiceOver 설명 목록 지원
• 설명 목록 지원에 대한 개략

단일 용어와 단일 정의

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

복수 용어와 단일 정의

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

단일 용어와 복수 정의

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>
  <dd>
    붉은 판다, 레서 판다, 랫서 판다, 혹은 "Firefox"는 초식성 포유류이다. 몸
    길이는 애완용 고양이보다 약간 큰 정도인 60cm다.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

복수 용어와 복수 정의

위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.

메타데이터

<dl>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

결과

팁: 아래처럼 키-값 구분자를 CSS로 지정하면 유용합니다.

dt:after {
  content: ": ";
}

이름-값 그룹을 <div>로 감싸기

HTML에서는 <dl> 요소의 각 이름-값 그룹을 <div> 요소로 감쌀 수 있습니다. 이는 마이크로데이터를 사용하거나 전역 속성이 전체 그룹에 적용될 때 또는 스타일링 목적으로 유용할 수 있습니다.

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

참고

페이지에서 들여쓰기를 하기 위한 목적으로 <dl> (또는 <ul>) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.

용어의 들여쓰기를 수정하려면 CSS margin 속성을 사용하세요.

기술 요약

같이 보기

• <dt> 요소
• <dd> 요소