dt element - by. UXKM

2025-05-16

요약 설명
<dt> 요소는 <dl> 정의 목록 안에서 정의될 용어(term)를 나타내는 시맨틱 태그입니다.
해당 용어에 대한 설명은 뒤따르는 <dd> 요소에 위치하며, <dl> 내부에서는 여러 개의 <dt>와 <dd>를 조합해 하나 이상의 용어-설명 쌍을 만들 수 있습니다. 일반적인 사용처는 사전식 용어 설명, FAQ 목록, 키-값 구조 등입니다.

주요 역할 및 특징

정의 목록의 제목
- <dt>는 정의 목록(<dl>)에서 용어나 항목을 나타냅니다.
- 각 <dt>는 대응되는 <dd>(정의 내용)와 짝을 이룹니다.
구조적 의미 부여
- <dt>는 정의 항목의 제목을 시각적 및 의미적으로 강조합니다.
- 하나의 <dt>에 여러 <dd>를 연결할 수 있습니다.
다른 요소와의 관계
- <dt>는 반드시 <dl> 내부에서 사용해야 하며, 단독으로 사용할 수 없습니다.
- <dt> 다음에는 반드시 <dd> 요소가 따라와야 합니다.
시각적 스타일
기본적으로 굵은 글꼴로 표시되며, CSS를 사용해 스타일을 변경할 수 있습니다.
다양한 콘텐츠 포함 가능
<dt> 요소는 단순한 텍스트뿐만 아니라 이미지, 링크 등 다양한 HTML 요소를 포함할 수 있습니다.

CSS 기본 값

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

							dt {
								display: block;
								font-weight: bold; /* 기본적으로 텍스트를 강조하기 위해 볼드체로 표시됩니다. */
							}

기본 문법

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

속성

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

							<dl>
								<dt id="html-term" class="definition-term">HTML</dt>
								<dd>HyperText Markup Language의 약자입니다.</dd>
							</dl>

예제

기본 정의 목록의 <dt>

								<dl>
									<dt>HTML</dt>
									<dd>웹 페이지의 구조를 정의합니다.</dd>
									<dt>CSS</dt>
									<dd>웹 페이지의 스타일을 지정합니다.</dd>
								</dl>

강조된 텍스트를 포함하는 <dt>

								<dl>
									<dt><strong>CSS</strong>란?</dt>
									<dd>웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다.</dd>
								</dl>

이미지를 포함하는 <dt>

								<dl>
									<dt><img src="html-icon.png" alt="HTML 아이콘"> HTML</dt>
									<dd>웹 페이지 구조를 정의하는 마크업 언어입니다.</dd>
								</dl>

링크를 포함하는 <dt>

								<dl>
									<dt><a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML</a></dt>
									<dd>웹 개발에서 사용하는 마크업 언어에 대한 설명입니다.</dd>
								</dl>

주의사항

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