HTML <dt> 태그 – 올바른 이해와 사용 방법

`<dt>` 태그의 정의 및 사용법

<dt> 태그는
설명 목록(<dl> 요소를 사용하여 나타냄)에 있는 이름과 이름에 대한 설명으로 구성된 그룹의 이름을 나타내는 태그이며,
<dt>는 Description Term의 약자로 사용된 것입니다.

여기서 이름은 용어, 정의, 명칭, 주제, 질문 등을 말합니다.

여기서 이름에 대한 설명은 <dd> 태그가 그 역할을 합니다.
<dd> 태그는 설명을 제공할 <dt> 태그 뒤에 위치하지만, 여러 개의 <dt>를 연속해 배치하면 바로 다음 <dd>로 한꺼번에 설명을 제공할 수 있습니다.
구문 구조로서의 예제를 참고하세요.

이 태그는 <dl> 요소의 콘텐츠로 사용해야 합니다.

사용 용도로서의 예제

다음은 <dt> 태그의 사용 용도로서의 예제입니다.
<dt> 태그를 설명 목록의 어떤 용도의 이름으로 사용하는지에 대해 쉽게 이해할 수 있습니다.

"용어"나 "정의"를 나타내는 용도의 이름

HTML

<p>HTML과 CSS의 설명입니다.</p>
<dl>
    <dt><dfn>HTML</dfn></dt>
    <dd>
        HyperText Markup Language의 약자로,
        웹 페이지를 작성하는 데 사용되는
        마크업 언어입니다.
    </dd>
    <dt><dfn>CSS</dfn></dt>
    <dd>
        Cascading Style Sheets의 약자로,
        웹 페이지의 스타일과 레이아웃을 지정하는데 사용되는
        스타일시트 언어입니다.
    </dd>
</dl>

알아두세요!
<dt> 태그 자체는 <dl>에 사용될 때 그 내용이 정의되는 용어임을 나타내지 않지만, <dfn> 태그을 사용하여 이를 나타낼 수 있습니다.

"명칭"을 나타내는 용도의 이름

HTML

<p>가장 인기있는 영화 주인공입니다.</p>
<dl>
    <dt>헤리 포터</dt>
    <dd>
        J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로,
        마법사로서 모험을 겪는 소년입니다.
    </dd>
    <dt>루크 스카이워커</dt>
    <dd>
        '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로,
        제다이 기사로서 강력한 힘을 가진 인물입니다.
    </dd>
</dl>

"주제"를 나타내는 용도의 이름

HTML

<p>여행 계획을 주제로 설명합니다.</p>
<dl>
    <dt>여행 목적</dt>
    <dd>휴식, 관광, 탐험 등</dd>
    <dt>여행 기간</dt>
    <dd>짧은 여행 (1-3일), 중간 여행 (4-7일), 긴 여행 (8일 이상)</dd>
    <dt>여행 예산</dt>
    <dd>저예산, 중간 예산, 고예산</dd>
</dl>

"질문"을 나타내는 용도의 이름

HTML

<p>자주하는 질문과 답변입니다.</p>
<dl>
    <dt>Q: 제품 구매 방법은 무엇인가요?</dt>
    <dd>A: 제품은 온라인 쇼핑몰 또는 오프라인 매장에서 구매하실 수 있습니다.</dd>
    <dt>Q: 제품 사용 방법은 무엇인가요?</dt>
    <dd>A: 제품 사용 방법은 설명서를 참고하거나 제조사 홈페이지에서 확인하실 수 있습니다.</dd>
    <dt>Q: 제품에 문제가 발생하면 어떻게 해야 하나요?</dt>
    <dd>A: 제품에 문제가 발생하면 제조사 고객센터 또는 A/S 센터에 문의하시기 바랍니다.</dd>
 </dl>

복합적인 용도의 이름

HTML

<p>우리회사를 소개합니다.</p>
<dl>
    <dt>회사명</dt>
    <dd>우리회사</dd>
    <dt>설립일</dt>
    <dd>2012년 7월 30일</dd>
    <dt>사업 분야</dt>
    <dd>사회적으로 유익한 가치의 창출</dd>
    <dt>전화번호</dt>
    <dd>02-1234-5678</dd>
    <dt>사업 소개</dt>
    <dd>모든 사람을 위한 코딩 학습서입니다.</dd>
 </dl>

구문 구조로서의 예제

다음은 <dt> 태그의 구문 구조로서의 예제입니다.
<dt> 태그를 설명 목록에서 어떤 구조의 콘텐츠로 사용하는지에 대해 쉽게 이해할 수 있습니다.

단일 이름과 단일 설명

HTML

<p>가장 인기있는 영화 주인공입니다.</p>
<dl>
    <dt>헤리 포터</dt>
    <dd>
        J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로,
        마법사로서 모험을 겪는 소년입니다.
    </dd>
    <dt>루크 스카이워커</dt>
    <dd>
        '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로,
        제다이 기사로서 강력한 힘을 가진 인물입니다.
    </dd>
</dl>

여러 이름과 단일 설명

단일 이름과 여러 설명

웹 페이지에서 이모지(이모티콘) 사용하기

여러 이름과 여러 설명

위 예제들을 결합하여 여러 이름 여러 설명과 연결하는 것도 가능합니다.

이름과 설명을 `<div>` 태그로 감싸기

명세서에서는 스타일 지정을 돕기 위해 이름(<dt> 요소를 사용하여 표시)과 이름에 대한 설명(<dd> 요소를 사용하여 제공)으로 구성된 그룹을 <div> 태그로 감싸는 것도 좋은 방법이라고 명시하고 있습니다.

<dt> 태그는 <dl> 태그의 자식 요소로 사용되거나, <dl> 태그의 자식 요소인 <div> 태그의 자식 요소로만 사용될 수 있습니다.

HTML

<style>
    .dl-item {
        padding: 1em;
        border-radius: 1em;
        background-color: beige;
    }
    .dl-item + .dl-item {
        margin-top: 1em;
    }
    .dl-item dt {
        font-weight: 600;
        margin-bottom: 0.3em;
    }
    .dl-item dd {
        margin: 0;
    }
</style>
<dl>
    <div class="dl-item">
        <dt>이름</dt>
        <dd>홍길동</dd>
    </div>
    <div class="dl-item">
        <dt>출생년도</dt>
        <dd>2002</dd>
    </div>
    <div class="dl-item">
        <dt>출생지</dt>
        <dd>서울</dd>
    </div>
    <div class="dl-item">
        <dt>좋아하는 색</dt>
        <dd>파랑</dd>
    </div>
</dl>

CSS rem과 em 단위