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>을 탐색할 때 콘텐츠를 리스트로 표현합니다. 따라서 각 항목의 콘텐츠를 서로의 관계를 나타낼 수 있는 형태로 나타내야 합니다.
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||
|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||
| Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
dl | |||||||