티스토리 뷰

Frontend/Html

# dl, dt, dd

zoeful 2020. 8. 14. 18:09

프론트앤드 양성과정에서 시멘틱 마크업을 하기 위해 배웠던 내용들을 간단하게라도 하나씩 복습해보려고 해요 !
회사에서는 javascript 위주의 작업을 주로 하다보니 확실히 안쓰면 잊혀진다는 얘기가 맞다는걸 실감하고 있어요 ㅜ_ㅜ

dl태그는 용어를 정의할때 사용하는 태그입니다.
dl태그는 dt와 dd를 세트로 묶어서 다니는데 형태는 아래와 같습니다.

<dl>
	<dt>용어의 제목</dt>
	<dd>용어의 설명</dd>
</dl>

 

 

이때 dl태그는 하나 이상의 dt, dd 세트를 담고 있어야합니다.
그렇다고해서 반드시 dt, dd 한쌍의 세트로만 담겨있어야하는건 아니고, 아래의 형태라면 모두 가능합니다.

<dl>
	<dt>용어의 제목1</dt>
	<dt>용어의 제목2</dt>
	<dd>용어의 설명</dd>
</dl>
<dl>
	<dt>용어의 제목</dt>
	<dd>용어의 설명1</dd>
	<dd>용어의 설명2</dd>
</dl>


대신 dt와 dd는 dl태그 밖에서 독립적으로 사용할 수 없습니다.

또한 dl태그 안에는 div태그를 dt와 dd의 형제 요소로 사용될 수 없습니다.

댓글
공지사항