dl, dt, dd 태그에 대해 알아보자

양시연·2023년 6월 19일
0

html/css

목록 보기
2/2

안녕하세요 ! 오늘은 html에서 dl 태그에 관하여 얘기해보겠습니다.

dl태그는 정의형 목록으로, definition(혹은 description이라고도 하더라구요) list의 약자입니다.
말 그대로 설명을 하거나 정의를 할 때 사용하는 태그입니다.

dl 태그 밑로는 dt태그와 dd 태그가 있습니다.

dt 태그는 definition term의 약자로, 정의하려는 용어의 제목을 나타냅니다.

dd 태그는 definition description의 약자로, 용어에 대한 설명을 적을 수 있습니다.



위 사진은 네이버 영한사전에 '정의하다'를 검색했을 때 나오는 창입니다.

위 사진에서 define이라는 영단어는 dt태그가, 아래 설명들은 dd태그가 해당되겠죠 ?

dl 태그는 용어를 설명할 때 자주 사용됩니다 !
ul-li 혹은 ol-li 태그처럼 dl-dt-dd 태그는 항상 짝을 이루며 사용되며, 1대 다, 다대 1로도 사용이 가능합니다.


dl태그를 활용한 예시를 보여드리겠습니다.

<dl>
    <dt>사과</dt>
    <dd>[명사] 사과나무의 열매.</dd>
    <dd>[명사] 자기의 잘못을 인정하고 용서를 빎.</dd>
  </dl>

저는 사과를 dt로 잡고 그에 대한 설명을 dd 태그에 담아주었습니다.
이 코드를 라이브 서버로 오픈하면

위 사진과 같은 결과가 나옵니다.

저는 아무 스타일링을 하지 않았지만, dd태그에 담긴 글들은 들여쓰기가 되어있다는 걸 확인할 수 있습니다.


짧은 포스팅이지만 도움이 되셨길 바랍니다.
추가적으로 필요한 사항들이 있다면 추후에 보충하겠습니다 !

봐주셔서 감사합니다.

0개의 댓글