[list] HTML - <dl> 태그 ★ - 설명리스트 (= 설명목록 = dl태그 = 디엘태그) (HTML5용도변경) ※ (설명리스트/정의리스트/데이터리스트)

1. <dl> 예제 - 설명 리스트
2. <dl> 정의
3. <dl> 구문
4. <dl> 예제 - dt・dd 나란히

<dl> 예제 - 설명 리스트 

 

<style>

dl,dl * {border:1px solid red;}

</style>

 
<dl>
   <dt>HTML</dt>

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

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

 

결과보기 

<dl> 정의

 
설명이 필요한 목록 정의.

 

---

 

1.

• <dl> : Description List (설명 리스트) 약자
• <dt>와<dd> 수평으로 나란히 배치하려면, <dt> 요소에 float:left 속성 적용.
• <dt> 태그 하나 당 <dd> 태그 여러 개 사용 괜찮으나, <dt> 태그 개수가 <dd> 태그 개수보다 많으면 안 됨.

 

2. 함께 사용하는 태그들

• <dl> 태그 : 설명 리스트 선언. (dt, dd 요소의 부모 요소)
• <dt>태그 : 각 개별 항목의 용어. (dl의 자식요소, dd와 형제 요소)
• <dd>태그 : 각 개별 항목의 설명. (dl의 자식요소, dt와 형제 요소)

 

3. <dl> 태그 쓰임새 변경

• HTML4.01 - <dl> 태그가 정의 목록 (definition list)으로 사용됨.
• HTML5 - <dl> 태그가 설명 목록 (description list)으로 사용됨.

 

4.

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

 

<dl> 구문

 
<dl>
    <dt>설명항목</dt>

     <dd>항목세부내용</dd>
    <dt>설명항목</dt>

    <dd>항목세부내용</dd>

     ...

</dl>

 

<dl> 예제 - dt・dd 나란히

 

<style>

.a, .a * {border:1px solid red; box-sizing:border-box; }

.a {width:360px;}

.a dl {overflow:hidden;}

.a dt {float:left; width:49.5%; margin:0;}

.a dd {float:right; width:49.5%; margin:0;}

</style>

<div class="a">

    <h2>open-close</h2>

    <dl>

        <dt>월/화/목/금</dt><dd>am 10:30 ~ pm 09:00</dd>

        <dt>수 요 일</dt><dd>am 10:30 ~ pm 07:00</dd>

        <dt>토 요 일</dt><dd>am 10:30 ~ pm 04:00</dd>

    </dl>

    <p style="text-align:left;">※ (일요일・ 공휴일) : 휴진.</p>

</div>

 

결과보기