[HTML/CSS] 정의 목록(dl, dt, dd)

youngseo·2022년 4월 13일
0

HTML/CSS

목록 보기
14/54
post-thumbnail

정의 목록 (dl, dt, dd)

1. <dl>

<dl> 요소는 설명 목록을 나타냅니다. <dl><dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.

dt-dd는 하나의 용어와 하나의 정의로 사용될 수도, 여러개의 용어와 하나의 정의로 사용될 수도, 하나의 용어와 여러개의 정의로 사용될 수도 있습니다.

또한 스타일을 주고 싶은 경우 dt-dd부분을 div로 묶어 사용할 수 있습니다.( 단, div를 형제요소로 사용할 수는 없습니다. )

<p>Cryptids of Cornwall:</p>

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

Cryptids of Cornwall:

Beast of Bodmin A large feline inhabiting Bodmin Moor.
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>

<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>

0개의 댓글