![[Vue.js] <dl>, <dt>, <dd> 태그](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-06-05T01%3A08%3A34.630Z-d85adfcb-2444-43d2-9582-aaae177a652d&w=3840&q=75)
<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를 적용해 리스트처럼 꾸밀 수 있습니다.
Share article