용어(dt)와 정의(dd) 쌍들의 영역(dl)을 설정.
Description List, Definition Details, Definition Term
- dl은 dd, dt만을 포함해야 함.
- key/value 형태를 표시할 때 유용.
<body>
<dl>
<dt>coffee</dt>
<dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffee species.</dd>
<dt>Milk</dt>
<dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd>
</dl>
</body>
dl, dt, dd {display : block;}
하지만 이것을 묶어서 스타일링 하기도 어렵고(div로 묶는거 불가능) 사용하는것도 까다롭기 때문에 주로 목록을 표현할때 쓰려면 li태그를 많이 이용을 한다. 그래서 요즘 사용하는 방식은 다음과 같다.
<ul>
<li>
<dfn>Coffee</dfn>
<p>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffee species.</p>
</li>
<li>
<dfn>Milk</dfn>
<p>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</p>
</li>
</ul>
cf. <dfn>은 용어를 하나를 정의하는것을 표현하는것. p는 문단 단락으로 표현을 한다.
그래서 이와같이 li태그로 묶어서 한다면 스타일링 하기도 편해서 목록으로 바꿔서 표현한다.
'HTML > 요소' 카테고리의 다른 글
| BODY 내 구조 개념 --> 문자 콘텐츠 (PRE) (0) | 2020.12.28 |
|---|---|
| BODY 내 구조 개념 --> 문자 콘텐츠 (P, HR) (0) | 2020.12.28 |
| BODY 내 구조 개념 --> 문자 콘텐츠 (OL, UL, LI) (0) | 2020.12.27 |
| BODY 내 구조 개념 --> 콘텐츠 구분 예제 (0) | 2020.12.24 |
| BODY 내 구조 개념 --> 콘텐츠 구분 DIV (0) | 2020.12.24 |