Coding/HTML & CSS

HTML - 정의형 목록

개발자 동퐈 2025. 2. 20. 21:19

definition list를 의미하는 <dl>은 자식요소로 <dt> definition term, <dd> definition description을 갖는다. 

사전이나 설명서, FAQ, 용어집 같이 글로 무언가를 표현할때 사용한다. 

 

<dl>태그를 사용하면 문서 구조상 해당 컨텐츠가 설명형 목록임을 알 수 있고 웹 접근성을 요구하는 스크린리더 프로그램이 해당 컨텐츠가 설명 목록임을 알 수 있기 때문에 웹 표준을 준수하기 위해 사용해야한다. 

 

<dl>
      <dt>HTML</dt>
      <dd>웹 문서의 구조를 정의하는 마크업 언어</dd>
      <dt>CSS</dt>
      <dd>웹 문서의 스타일을 정의하는 스타일시트 언어</dd>
      <dt>JavaScript</dt>
      <dd>웹 문서의 동작을 정의하는 프로그래밍 언어</dd>
    </dl>

 

<dl>안에는 <dt>와 <dd> 순서로 사용해야하며 복수로 사용 가능하다. <dt> <dt> , <dd> <dd> 이런식의 사용은 불가하다. 

<div>를 이용해서 <dt>와 <dd> 를 묶어줄 수 있는데 이는 추후 CSS를 적용할 때 매우 유용하다. 다만 <dt>와 <dd>를 한 쌍으로 묶어줘야한다.

'Coding > HTML & CSS' 카테고리의 다른 글

HTML - 인용문과 줄 바꿈 요소  (0) 2025.02.21
HTML - 프레이징 요소  (0) 2025.02.21
HTML- 순서형 비순서형 요소  (0) 2025.02.19
HTML - anchor 요소  (2) 2025.02.18
HTML - 이미지와 피겨 요소  (0) 2025.02.18