[list] HTML - <dt> 태그 ★ - 설명리스트의 설명항목 (= dt태그 = 디티태그) ※ (정의리스트/데이터리스트)의 항목부분

1. <dt> 예제 - 설명 항목
2. <dt> 정의
3. <dt> 구문

<dt> 예제 - 설명 항목

 
<dl>

  <dt>HTML</dt>

  <dd>홈페이지 기본 골격</dd>

  <dt>CSS</dt>
  <dd>홈페이지 피부 의상</dd>
</dl>

 

결과보기

<dt> 정의

 
설명이 필요한 목록에서 개별 설명 항목 지정.

 

---

 

1.

• <dt> : Definition Term (정의 용어) 약자
• <dt>와<dd> 수평으로 나란히 배치하려면, <dt> 요소에 float:left 속성 적용.
• <dt> 태그 하나 당 <dd> 태그 여러 개 사용 괜찮으나, <dt> 태그 개수가 <dd> 태그 개수보다 많으면 안 됨.

 

2. 함께 사용하는 태그

• <dl> 태그 : 설명 리스트 선언.
• <dt>태그 : 각 개별 항목의 용어.
• <dd>태그 : 각 개별 항목의 설명.

 

3. 쓰임새 변경

• HTML4.01 - <dt> 태그가 정의목록 (Definition List)의 개별아이템 정의에 사용. 
• HTML5 - <dt> 태그가 설명목록 (Description List)의 개별항목 선언에 사용.

 

4.

시작태그와 종료태그로 구성.

 

<dt> 구문

(O) - 즉, <dt>에 대응하는 <dd>는 최소 1개 이상 있어야 함.

<dl>
    <dt>설명항목</dt>
    <dd>세부설명</dd>
    <dt>설명항목</dt>
    <dd>세부설명</dd>
</dl>

 

---

(O) - 즉, <dt> 1개에 여러 개의 <dd> 가능.

 

<dl>
    <dt>설명항목</dt>
    <dd>세부설명</dd>
    <dd>세부설명</dd>
    <dt>설명항목</dt>
    <dd>세부설명</dd>
    <dd>세부설명</dd>

</dl>

 

---

(X) - ∵ <dt>에 대응하는 <dd>가 없음.

 

<dl>
    <dt>설명항목</dt>
    <dt>설명항목</dt>
    <dd>세부설명</dd>

</dl>