<dd>
태그의 정의 및 사용법
<dd>
태그는
<dt>
요소에 대한 설명, 정의 또는 값을 나타내는 태그입니다.
<dd>
는 Description Details의 약자로 사용된 것입니다.
<dd>
태그로 나타내는 이름에 대한 설명은 <dd>
태그가 그 역할을 합니다.
<dd>
태그는 설명을 제공할 <dd>
태그 뒤에 위치하지만, 여러 개의 <dt>
를 연속해 배치하면 바로 다음 <dd>
로 한꺼번에 설명을 제공할 수 있습니다.
구문 구조로서의 예제를 참고하세요.
이 태그는 <dl>
요소의 콘텐츠만로 사용해야 합니다.
사용 용도로서의 예제
다음은 <dd>
태그의 사용 용도로서의 예제입니다.
<dd>
태그를 설명 목록의 어떤 용도의 설명으로 사용하는지에 대해 쉽게 이해할 수 있습니다.
"용어"나 "정의"를 설명하는 용도
알아두세요!
<dt>
태그 자체는 <dl>
에 사용될 때 그 내용이 정의되는 용어임을 나타내지 않지만, <dfn>
을 사용하여 이를 나타낼 수 있습니다.
HTML과 CSS의 설명입니다.
- HTML
- HyperText Markup Language의 약자로, 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다.
- CSS
- Cascading Style Sheets의 약자로, 웹 페이지의 스타일과 레이아웃을 지정하는데 사용되는 스타일시트 언어입니다.
"명칭"를 설명하는 용도
가장 인기있는 영화 주인공입니다.
- 헤리 포터
- J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로, 마법사로서 모험을 겪는 소년입니다.
- 루크 스카이워커
- '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로, 제다이 기사로서 강력한 힘을 가진 인물입니다.
"주제"를 설명하는 용도
여행 계획을 주제로 설명합니다.
- 여행 목적
- 휴식, 관광, 탐험 등
- 여행 기간
- 짧은 여행 (1-3일), 중간 여행 (4-7일), 긴 여행 (8일 이상)
- 여행 예산
- 저예산, 중간 예산, 고예산
"질문"을 설명하는 용도
자주하는 질문과 답변입니다.
- Q: 제품 구매 방법은 무엇인가요?
- A: 제품은 온라인 쇼핑몰 또는 오프라인 매장에서 구매하실 수 있습니다.
- Q: 제품 사용 방법은 무엇인가요?
- A: 제품 사용 방법은 설명서를 참고하거나 제조사 홈페이지에서 확인하실 수 있습니다.
- Q: 제품에 문제가 발생하면 어떻게 해야 하나요?
- A: 제품에 문제가 발생하면 제조사 고객센터 또는 A/S 센터에 문의하시기 바랍니다.
복합적인 용도의 이름을 설명하는 용도
우리회사를 소개합니다.
- 회사명
- 우리회사
- 설립일
- 2012년 7월 30일
- 사업 분야
- 사회적으로 유익한 가치의 창출
- 전화번호
- 02-1234-5678
- 사업 소개
- 모든 사람을 위한 코딩 학습서입니다.
구문 구조로서의 예제
다음은 <dd>
태그의 구문 구조로서의 예제입니다.
<dd>
태그를 설명 목록에서 어떤 구조의 콘텐츠로 사용하는지에 대해 쉽게 이해할 수 있습니다.
단일 이름과 단일 설명
가장 인기있는 영화 주인공입니다.
- 헤리 포터
- J.K. 롤링의 소설 '해리 포터' 시리즈의 주인공으로, 마법사로서 모험을 겪는 소년입니다.
- 루크 스카이워커
- '스타워즈' 시리즈에서 주요한 역할을 맡은 캐릭터로, 제다이 기사로서 강력한 힘을 가진 인물입니다.
여러 이름과 단일 설명
- 미국
- 미합중국
- 주 50개와 특별구 1개로 이루어진 연방제 공화국이다.
단일 이름과 여러 설명
- 커피
- 커피 나무의 열매로 만든 차
- 좋아요! 아이스 아메리카노 😃
여러 이름과 여러 설명
위 예제들을 결합하여 여러 이름 여러 설명과 연결하는 것도 가능합니다.
이름과 설명을 <div>
태그로 감싸기
명세서에서는 스타일 지정을 돕기 위해 이름(<dt>
요소를 사용하여 표시)과 이름에 대한 설명(<dd>
요소를 사용하여 제공)으로 구성된 그룹을 <div>
태그로 감싸는 것도 좋은 방법이라고 명시하고 있습니다.
<dd>
태그는 <dl>
태그의 자식 요소로 사용되거나, <dl>
태그의 자식 요소인 <div>
태그의 자식 요소로만 사용될 수 있습니다.
- 이름
- 홍길동
- 출생년도
- 2002
- 출생지
- 서울
- 좋아하는 색
- 파랑
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<dd>
|
1 | 12 | 1 | 4 |
명세서
명세서 사양 | |
---|---|
<dd>
|
HTML Standard #the-dd-element |