[Vue.js] <dl>, <dt>, <dd> 태그

KangHo Lee

Jun 05, 2025

Contents

✅ 각각의 태그 설명 📘 예시 💡 사용 예시 🔔 참고

<dl>, <dt>, <dd>는 HTML에서 정의 목록(definition list)을 만들 때 사용하는 태그입니다.

용어(이름)와 그 설명(정의)을 짝지어서 표현할 때 적절합니다.

✅ 각각의 태그 설명

태그	의미
`<dl>`	definition list의 약자, 정의 목록 전체를 감싸는 태그
`<dt>`	definition term의 약자, 용어나 항목 제목을 나타냄
`<dd>`	definition description의 약자, 용어의 설명(정의)을 나타냄

📘 예시


<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 만드는 마크업 언어입니다.</dd>

  <dt>CSS</dt>
  <dd>웹 페이지를 꾸미기 위한 스타일 시트 언어입니다.</dd>

  <dt>JavaScript</dt>
  <dd>웹 페이지에 동적인 기능을 추가하는 스크립트 언어입니다.</dd>
</dl>

🔍 결과

HTML

웹 페이지의 구조를 만드는 마크업 언어입니다.

CSS

웹 페이지를 꾸미기 위한 스타일 시트 언어입니다.

JavaScript

웹 페이지에 동적인 기능을 추가하는 스크립트 언어입니다.

💡 사용 예시

FAQ 목록

용어 사전

제품 설명서의 항목별 설명

폼 설명 (레이블과 설명이 필요한 경우)

🔔 참고

<dl> 안에 <dt>는 여러 개 있을 수 있고, 각각 <dd>와 짝지어 사용합니다.

디자인적으로는 <ul>/<ol>보다 다소 덜 쓰이지만, 시멘틱 구조나 접근성 향상에는 유리합니다.

필요하면 <dl>에 CSS를 적용해 리스트처럼 꾸밀 수 있습니다.