• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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> 태그는 전역속성과 이벤트속성 지원.
 

<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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
list HTML - <ul> 태그 ★ - 객체 ★ - 순서없는리스트 (= 순서없는목록태그 = ul태그 = 유엘태그/…
list HTML - <ol> 태그 ★ - 순서있는리스트 (= 목록태그 = ol태그 = 오엘태그 = 올태그) - (H…
list HTML - <li> 태그 ★ - 리스트목록 (= 리스트아이템 = li태그 = 리태그/리스트태그/엘아이태그…
list HTML - <dir> 태그 - 디렉토리목록 (= dir태그 = 디르태그 = 디렉토리태그) (HTML5제외)
list HTML - <dl> 태그 ★ - 설명리스트 (= 설명목록 = dl태그 = 디엘태그) (HTML5용도변경) …
list HTML - <menu> 태그 - 명령어메뉴목록 (= menu태그 = 메뉴태그)
list HTML - <dt> 태그 ★ - 설명리스트의 설명항목 (= dt태그 = 디티태그) ※ (정의리스트/데이터리…
list HTML - <dd> 태그 ★ - 설명리스트의 설명항목 내용 (= dd태그 = 디디태그) ※ (정의리스트/데…
list HTML - <menuitem> 태그 - 마우스오른쪽 팝업메뉴 (= menuitem태그 = 메뉴아이템태그) …
목록
찾아주셔서 감사합니다. Since 2012