dl,dt,dd 요소

'용어'와 '그 설명' 으로 구성된 목록을 '정의형 목록 또는 정의 리스트(definition list)' 이라고 한다.

dl 요소 : 정의형 목록 (definition list)

dt 요소 : 용어 (definition term)

dd 요소 : 용어 설명부분 (definition description)

많은 브라우저에서 dd 요소가 들여쓰기가 되어 표시

 

dl 요소

block 요소이지만 dt,dd 요소 이외의 요소를 포함 할 수 없다.

  • dl요소 밑에는 dt,dd를 제외한 다른 유형의 요소가 있어서는 안된다.
  •  

dt 요소

inline요소이며 inline요소와 텍스트를 포함 할 수 있다.

  • dt 내부에 div태그는 허용불가. (inline요소인 p, span, layber 등은 가능)
  • 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하므로 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다. 따라서 dt 요소는 반드시 dd 요소 앞에 있어야 한다.

 

dd 요소

block요소이며 inline요소와 텍스트를 포함할 수 있고, block요소를 포함할 수 있다.

  • dd 요소 내부에는 div , 기타 요소를 포함할 수 있다.
  • dl 요소 내에서만 사용되며 반드시 dt 요소와 짝을 이루어 사용해야 한다.

 

 

 

 


 

 

일반적인 단순한 표형태는 dl태그로

복잡한 데이터 및 그리드 같은 복합형 표일경우엔 table로 구성

반응형

'UXUI Development > Html5' 카테고리의 다른 글

유효성검사  (0) 2018.07.04
html5 - 시맨틱태그(Semantic tag)  (0) 2018.06.28

+ Recent posts