HTML <dl>: 설명 목록 요소

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

<p>Dwarf Fortress의 종족</p>
<dl>
  <dt>드워프</dt>
  <dd>드워프는 알코올 의존적인 인간형 생명체로 포트리스 모드의 종족이며, 어드벤처 모드에서도 플레이할 수 있습니다.</dd>

  <dt>엘프</dt>
  <dd>엘프는 자신들만의 자연 보호를 강요하는 인간형 생명체입니다.</dd>

  <dt>고블린</dt>
  <dd>고블린은 어두운 웅덩이에 거주하는 사악하고 공격적인 인간형 생명체로, 포트리스 모드의 주요한 적입니다.</dd>
</dl>

불러오는 중...

특성

전역 특성만 포함합니다.

예제

단일 용어와 단일 설명

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

복수 용어와 단일 설명

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

단일 용어와 복수 설명

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

<div>로 용어 그룹 감싸기

<dl> 요소의 이름-값 쌍을 <div> 요소로 감쌀 수도 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 그룹에 스타일을 적용할 때 유용합니다.

<dl>
  <div>
    <dt>이름</dt>
    <dd>둘리</dd>
  </div>
  <div>
    <dt>종족</dt>
    <dd>케라토사우루스</dd>
  </div>
  <div>
    <dt>고향</dt>
    <dd>남극</dd>
  </div>
  <div>
    <dt>색상</dt>
    <dd>녹색</dd>
  </div>
</dl>

접근성 고려사항

각각의 스크린 리더는 <dl>의 콘텐츠를 서로 다르게 표현합니다. iOS 14 이후로, VoiceOver는 가상 커서로 <dl>을 탐색할 때 콘텐츠를 리스트로 표현합니다. 따라서 각 항목의 콘텐츠를 서로의 관계를 나타낼 수 있는 형태로 나타내야 합니다.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefoxiOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
dl
MDN browser-compat-data

같이 보기

  • 설명 목록의 구성 요소: <dd>, <dt>