dd element - by. UXKM

2025-05-16

요약 설명
<dd> 요소는 <dl> 정의 목록 안에서 앞서 정의된 용어(<dt>)에 대한 설명(description)을 제공하는 시맨틱 태그입니다.
하나의 <dt>에 여러 개의 <dd>를 연결할 수 있으며, 용어에 대한 정의, 의미, 예시 등을 기술하는 데 사용됩니다. <dl> 목록에서 <dt>와 함께 사용되어 용어와 설명의 관계를 명확하게 표현하는 구조를 구성합니다.

주요 역할 및 특징

정의 제목에 대한 설명 제공
- <dd>는 <dt> 요소의 제목을 설명하거나 부연 정보를 제공합니다.
- 하나의 <dt>에 여러 <dd>를 연결하여 다양한 설명을 추가할 수 있습니다.
구조적 의미 부여
<dd>는 정의 제목(<dt>)과 연결되어 정보를 그룹화하며, 문서의 의미론적 구조를 명확히 만듭니다.
다른 요소와의 관계
- <dd>는 반드시 <dl> 내부에서 사용해야 하며, <dt>와 짝을 이루어야 합니다.
- <dt>와 달리 기본 스타일에는 들여쓰기가 적용되어 시각적으로 구분됩니다.
여러 설명 지원
한 용어에 대해 여러 <dd> 요소를 사용하여, 다양한 설명이나 추가 정보를 나열할 수 있습니다.
다양한 콘텐츠 포함 가능
<dd>는 텍스트뿐만 아니라 이미지, 목록, 표, 링크 등 다양한 콘텐츠를 포함할 수 있어 용어에 대한 상세한 설명을 제공할 수 있습니다.

CSS 기본 값

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

							dd {
								display: block;
								margin-inline-start: 40px; /* 들여쓰기 효과 */
							}

기본 문법

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

속성

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

							<dl>
								<dt>HTML</dt>
								<dd id="html-description" class="description">웹 페이지의 구조를 정의하는 언어입니다.</dd>
							</dl>

예제

기본 정의 목록의 <dd>

								<dl>
									<dt>HTML</dt>
									<dd>하이퍼텍스트 마크업 언어로, 웹 페이지를 구조화하는 데 사용됩니다.</dd>
								</dl>

문단과 링크를 포함하는 <dd>

								<dl>
									<dt>CSS</dt>
									<dd>
										<p>CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다.</p>
										<a href="https://developer.mozilla.org/ko/docs/Web/CSS" target="_blank">CSS 자세히 알아보기</a>
									</dd>
								</dl>

이미지와 목록을 포함하는 <dd>

								<dl>
									<dt>JavaScript</dt>
									<dd>
										<img src="javascript-icon.png" alt="JavaScript 아이콘" width="50">
										<ul>
											<li>동적 웹 페이지 제작</li>
											<li>이벤트 기반 프로그래밍</li>
											<li>클라이언트-서버 통신</li>
										</ul>
									</dd>
								</dl>

dl 요소가 중첩된 <dd>

								<dl>
									<dt>웹 기술</dt>
									<dd>
										웹 개발에 사용되는 다양한 기술을 포함합니다:
										<dl>
											<dt>HTML</dt>
											<dd>웹 페이지의 구조를 정의하는 언어.</dd>
											<dt>CSS</dt>
											<dd>웹 페이지의 스타일을 정의하는 언어.</dd>
											<dt>JavaScript</dt>
											<dd>웹 페이지에 동적인 기능을 추가하는 언어.</dd>
										</dl>
									</dd>
								</dl>

주의사항

<dd> 요소는 반드시 <dl> 요소의 직계 자식으로 위치해야 하며, 단독으로 사용될 수 없습니다.
<dd>는 항상 <dt>와 함께 쌍을 이루어야 하며, 용어와 그에 대한 설명을 명확히 구분하여 나열하는 데 사용해야 합니다.