728x90
- dd 태그는 dl 태그 목록에서 dt 태그의 설명을 제공하는 역할
- dl, dt, dd 태그를 함께 사용하여 용어-설명 목록을 구성
- CSS를 사용해 스타일링 가능하며, 상품 설명, 용어 정리, 프로필 등에 활용 가능
HTML dd 태그란?
dd 태그는 dl 태그(설명 목록) 내에서 dt 태그(설명 제목)에 대한 설명(정의)을 제공하는 태그입니다. 보통 용어와 그 설명을 짝지어 표시할 때 사용됩니다.
기본 문법
<dl>
<dt>HTML</dt>
<dd>웹 페이지를 구성하는 마크업 언어입니다.</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일과 디자인을 담당하는 언어입니다.</dd>
</dl>dt 태그는 용어(제목)를 나타내고, dd 태그는 해당 용어의 설명을 제공합니다.
주요 특징
- dt 태그와 함께 사용하여 용어 및 설명 목록을 구성
- dd 태그의 내용은 보통 들여쓰기(indent) 되어 표시됨
- 여러 개의 dd 태그를 사용하여 하나의 용어에 대해 여러 개의 설명을 추가 가능
dl, dt, dd 태그의 관계
- dl : 설명 목록(Description List)을 정의하는 태그
- dt : 설명할 용어나 제목(Definition Term)을 나타내는 태그
- dd : dt 태그에 대한 설명(Definition Description)을 제공하는 태그
사용 예제
💡 용어 설명 목록
🌈 예제 코드:
<dl>
<dt>HTML</dt>
<dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일을 정의하는 스타일시트 언어</dd>
<dt>JavaScript</dt>
<dd>웹 페이지의 동적인 기능을 담당하는 프로그래밍 언어</dd>
</dl>✅ 실행 결과:
- HTML
- 웹 페이지의 구조를 정의하는 마크업 언어
- CSS
- 웹 페이지의 스타일을 정의하는 스타일시트 언어
- JavaScript
- 웹 페이지의 동적인 기능을 담당하는 프로그래밍 언어
dt 태그에 대한 설명이 dd 태그로 제공되며, 브라우저에서 들여쓰기 형태로 표시됩니다.
💡 하나의 용어에 여러 개의 설명 추가
🌈 예제 코드:
<dl>
<dt>웹 개발</dt>
<dd>프론트엔드 개발</dd>
<dd>백엔드 개발</dd>
<dd>풀스택 개발</dd>
</dl>✅ 실행 결과:
- 웹 개발
- 프론트엔드 개발
- 백엔드 개발
- 풀스택 개발
하나의 dt 태그에 대해 여러 개의 dd 태그를 사용하여 여러 설명을 추가할 수 있습니다.
💡 dd 태그를 CSS를 활용하여 스타일링
🌈 예제 코드:
<style>
dl {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
dt {
font-weight: bold;
color: #333;
margin-top: 10px;
}
dd {
margin-left: 20px;
color: #666;
}
</style>
<dl>
<dt>HTML</dt>
<dd>웹 문서를 만드는 데 사용되는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지를 꾸미는 스타일시트 언어</dd>
</dl>CSS를 사용하여 dl, dt, dd 태그의 스타일을 조정할 수 있습니다.
dl 태그, ul 태그, ol 태그의 차이점
| 태그 | 설명 |
| dl | 설명 목록 (Definition List) - 용어와 설명을 짝지어 표시 |
| ul | 순서가 없는 목록 (Unordered List) - 불릿(•)으로 표시 |
| ol | 순서가 있는 목록 (Ordered List) - 숫자(1, 2, 3)로 표시 |
💡 dl 태그 사용 (설명 목록)
🌈 예제 코드:
<dl>
<dt>사과</dt>
<dd>빨갛고 달콤한 과일</dd>
<dt>바나나</dt>
<dd>길고 노란 열대 과일</dd>
</dl>✅ 실행 결과:
- 사과
- 빨갛고 달콤한 과일
- 바나나
- 길고 노란 열대 과일
용어와 설명을 한 쌍으로 표시할 때 사용
💡 ul 태그 사용 (순서 없는 목록)
🌈 예제 코드:
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>✅ 실행 결과:
- 사과
- 바나나
- 오렌지
단순한 리스트로 나열할 때 사용
💡 ol 태그 사용 (순서 있는 목록)
🌈 예제 코드:
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>✅ 실행 결과:
- 사과
- 바나나
- 오렌지
순서가 중요한 경우 사용
사용 장점
- 용어와 설명을 연결하여 정리할 때 (예: 사전, FAQ, 용어 설명)
- 상품 정보, 프로필, 기술 문서 등에서 정보 정리를 깔끔하게 할 때
- 단순 목록(ul, ol 태그)보다 의미 있는 정보를 전달할 때
728x90
'프로그래밍 > HTML' 카테고리의 다른 글
| HTML <wbr> 태그 (74) | 2025.02.23 |
|---|---|
| HTML <del> 태그 (취소 표시선) (119) | 2025.02.21 |
| HTML <datalist> 태그 (자동 완성 추천 목록 기능) (81) | 2025.02.21 |
| HTML <data> 태그 (SEO 및 데이터 처리) (126) | 2025.02.20 |
| HTML <colgroup> 태그 (78) | 2025.02.20 |