6. HTML 이론 ( 정의, 목록, Description, List, term, data)

 

정의할 때 사용하는 정의 list

 

description list ( dl ) 은

앞글에서 배운 ul, ol과 마찬가지로

전체를 감싸는 tag이다.

 

<dl>
</dl>

 

 

그다음에 사용하는 tag는

li tag 가 아니라

description term ( dt ) 를 사용한다.

 

dt 는 정의할 대상을 작성하는 곳이다.

 

<dl>
    <dt></dt>
</dl>

 

 

그다음 사용할 tag는

description data ( dd ) 를 사용한다.

dd tag 는 dt tag 를 설명하는 내용이

들어와야 한다.

 

dd tag 는

문단, 줄 바꿈, 이미지, 링크, 목록을

넣을 수 있다.

 

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

 

 

이제 tag에 대한 이론은 들었으니

적용한 예를 살펴보자

 

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd> //dd가 윗방향으로 dt를 만났을때 dt에 대한 정의 내용이 맞다면 잘 사용했다고 볼 수있다.
  <dt>Milk</dt>
  <dd>White cold drink</dd> // 이것도 마찬가지
</dl>
---------------------------------------------------------------------
<dl>
    <dt>커피</dt>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
</dl>
//바로 마주하는 dt는 coffee이지만 하나 더 같은 정의를 내리고 싶다면
//dt를 두개 이상 사용하여 하나의 dd가 두개 이상의 dt를 설명해줄 수 있게 쓸 수 있다.
---------------------------------------------------------------------
<dl>
  <div>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  </div>
  <div>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
  </div>
</dl>
//ol과 ul tag는 list 만 사용 가능했지만 dl은 div, dt, dd 사용이 가능하다.

 

하지만 잘 못 사용한 경우를 살펴보자.

 

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dd>White cold drink</dd> 
  <dt>Milk</dt>
</dl>
//coffee에 대한 설명이 잘못됐다고 볼 수도 있고
//milk에 대한 설명이 milk아래에 온것이 아니라
//위에 있기때문에 잘 못된 예시라고 볼 수 있다.

<dl>
  <section>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  </section>
</dl>
//dl은 div, dt, dd만 허용됨

 

 

참조 글

dl

https://www.w3schools.com/tags/tag_dl.asp

dt

https://www.w3schools.com/tags/tag_dt.asp

dd

https://www.w3schools.com/tags/tag_dd.asp