dl은 Description-List, dt는 Description-Term, 그리고 dd는 Description-Description의 약자입니다. 하지만 대부분 dl보다 ol, 그보다 ul이 더 익숙하게 느껴질 것으로 생각합니다. 그럼 dl은 왜 있는 것이고, 언제 쓰는 것일까요? 단순히 어떤 용어와 그 설명을 마크업 할 때일까요?
사실 다들 아시다시피 ol은 순서 있는 목록에, ul은 순서 없는 목록에 사용하게 되어 있습니다. 편의상 ul로 통일해서 사용하는 경우가 많지만, 웹 접근성을 생각한다면 존재 목적에 따라 태그를 신중하게 사용해야 합니다.
그렇다면 dl도 언제 써야 할 지 파악해야겠지요. MDN을 포함한 각종 레퍼런스 사이트에 찾아보면 dl, dt, dd 개념을 꽤 이상적(?)인 예시로 풀어 설명하고 있습니다만, 체감상 어떻게 자신의 코드에 적용해야 할지 애매하게 느껴졌습니다. 그래서 실제로는 어떻게 사용하는지 연구해봤습니다.
그 결과, 다음의 형태에 가장 적합하다는 것을 알게 되었습니다.
(A) is (B) 형태일 때
- (A)는 Name. 즉, 상위 또는 추상적 개념
- (B)는 Value. 즉, 하위 또는 구체적 내용
1. 메타데이터를 표시
예시
유형 : 열정적인 중재자(INFP)
적용
<dl>
<dt>유형</dt>
<dd>열정적인 중재자</dd>
<dd>INFP</dd>
</dl>2. 대상을 정의(설명)
예시
열정적인 중재자(INFP) : 최악의 상황이나 악한 사람에게서도 좋은 면만을 바라보며 긍정적이고 더 나은 상황을 만들고자 노력하는 진정한 이상주의자입니다.
적용
<dl>
<dt>열정적인 중재자</dt>
<dt>INFP</dt>
<dd>최악의 상황이나 …(생략) 진정한 이상주의자입니다.</dd>
</dl>주의사항
<dl>은 반드시 하나 이상의<dt>-<dd>짝을 담고 있어야 합니다.<dt>,<dd>는<dl>밖에서 독립적으로 사용할 수 없습니다.- 단,
<dt>-<dd>가 반드시 하나의 짝으로 지어져야 되는 것은 아닙니다.
- 그래서<dt>는 하나 이상의<dd>를 형제 요소로 가질 수 있습니다. (예:dt-dd-dd)
- 그래서 하나 이상의<dt>가 연속으로 나올 수 있습니다. (예:dt-dt-dd) <div>는<dt>-<dd>쌍을 감쌀 때 쓸 수 있지만,<dt>-<dd>의 형제 요소여서는 안 됩니다.<dl>은 공백이 아닌 텍스트 노드와<div>,<dt>,<dd>가 아닌 요소를 포함해서는 안 됩니다.
더 알아보기
스타트업에서 Software Engineer로 일하고 있습니다