This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<dl> 설명 목록 요소
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
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의 읽기 방식이 조정되므로 주의해야 합니다.
예제
단일 용어와 단일 정의
<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>) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.
기술 요약
| 콘텐츠 카테고리 | 플로우 콘텐츠, 만약<dl>의 자식 중 이름-값 그룹이 포함된 경우에는뚜렷한 콘텐츠. |
|---|---|
| 가능한 콘텐츠 | 하나 이상의 |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가 필수. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 해당 역할 없음 |
| 가능한 ARIA 역할 | group,list,none,presentation |
| DOM 인터페이스 | HTMLDListElement |
명세
| Specification |
|---|
| HTML # the-dl-element |