dl element - by. UXKM

2025-05-16

요약 설명
<dl> 요소는 정의 목록(description list)을 나타내는 시맨틱 태그로, 용어와 그에 대한 설명 쌍을 나열할 때 사용됩니다.
<dt> 요소로 용어를 정의하고, <dd> 요소로 해당 용어의 설명을 제공합니다.
일반적인 목록(<ul>, <ol>)과 달리 용어(key)-설명(value) 구조를 표현할 때 적합하며, 사전, FAQ, 용어 설명 등의 콘텐츠에 자주 활용됩니다.

주요 역할 및 특징

정의 목록 표현
- 용어와 그에 대한 설명을 구조적으로 나열할 때 사용됩니다.
- 예: 용어 사전, FAQ, 키-값 쌍 등.
구조적 의미 부여
- <dl>은 관련된 정보를 그룹화하여 의미론적으로 표현합니다.
- <dt>는 정의하려는 항목(주제), <dd>는 그에 대한 설명(세부 정보)을 나타냅니다.
유연한 목록 구성
- 하나의 <dt>에 여러 <dd>를 매칭하거나, 여러 <dt>를 하나의 <dd>에 연결할 수 있습니다.
  예: 용어 하나에 여러 설명이 필요한 경우 또는 여러 용어가 동일한 설명을 공유하는 경우.
- <dd> 요소 안에는 텍스트뿐만 아니라 이미지, 리스트, 링크 등 다양한 콘텐츠를 포함할 수 있어 상세하고 유연한 설명이 가능합니다.
다른 목록 요소와의 차이
<ul>과 <ol>은 항목 나열에 사용되지만, <dl>은 용어와 그 설명을 정의하는 데 특화되어 있습니다.

CSS 기본 값

<dl> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							dl {
								display: block;
								margin-block-start: 1em;
								margin-block-end: 1em;
							}

기본 문법

							<dl>
								<dt>용어 1</dt>
								<dd>용어 1에 대한 설명</dd>
								<dt>용어 2</dt>
								<dd>용어 2에 대한 설명</dd>
							</dl>

속성

<dl> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

							<!-- 속성 -->
							<dl id="description-list" class="description-list" aria-labelledby="용어에 대한 설명">
								<dt>용어</dt>
								<dd>용어에 대한 설명</dd>
							</dl>

예제

기본 정의 목록

하나의 용어에 여러 설명

여러 용어에 하나의 설명

중첩된 설명 목록

								<dl>
									<dt>웹 기술</dt>
									<dd>
										<dl>
											<dt>HTML</dt>
											<dd>구조를 정의하는 언어</dd>
											<dt>CSS</dt>
											<dd>스타일을 정의하는 언어</dd>
										</dl>
									</dd>
								</dl>

설명에 이미지와 링크 포함

								<dl>
									<dt>React</dt>
									<dd>
										React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.<br>
										<a href="https://reactjs.org/">공식 웹사이트</a>
									</dd>
									<!-- // React -->

									<dt>Vue</dt>
									<dd>
										Vue는 점진적으로 채택할 수 있는 JavaScript 프레임워크입니다.<br>
										<img src="vue-logo.png" alt="Vue 로고">
									</dd>
									<!-- // Vue -->
								</dl>

dl을 활용한 FAQ

접근성을 고려한 정의 목록

								<section aria-labelledby="glossary-title">
									<h2 id="glossary-title">용어 사전</h2>
									<dl>
										<dt>ARIA</dt>
										<dd>웹 접근성을 개선하기 위한 스펙입니다.</dd>
										<dt>WCAG</dt>
										<dd>웹 콘텐츠 접근성 지침을 의미합니다.</dd>
									</dl>
								</section>

주의사항

<dl> 요소의 직계 자식으로는 반드시 <dt>와 <dd>만 포함해야 합니다.
<dt>와 <dd>는 반드시 짝을 이루어야 하며, 단독으로 사용해서는 안 됩니다.