dl(Description List)요소의 용법이 헷갈립니다.
조회수 2909회
HTML dl 요소는 (or HTML Description List Element) 는 여러 짝의 용어와 정의를 둘러쌉니다. 이 요소의 일반적인 용법은 어휘를 구현하거나 메타데이터(키-값 짝의 목록)을 표시하는 것입니다.
dl 요소의 개요를 보면 위와 같이 서술되어 있는데, 제가 이해한 용법은 '단어 또는 용어(명사)에 대한 설명을 제공하는 컨텐츠에 사용한다' 인데,
<dl> <!-- 용어에 대한 정의 컨텐츠 -->
<dt>hashcode</dt>
<dd>해시 함수의 출력 비트 문자열</dd>
</dl>
위의 용법에 제한되어 있지 않고, 단순히 어느 것(something)에 대해 설명, 풀이, 또는 소개를 하는 컨텐츠라면 사용할 수 있는 건가요?
<dl> <!-- 특정 내용에 대한 소개 컨텐츠 -->
<dt>코딩을 공부하는 방법</dt>
<dd>매일 같이 한다</dd>
<dd>보기 보단 실제로 해본다</dd>
</dl>
<dl> <!-- Q&A 컨텐츠 -->
<dt>Q)반품을 하려면 어떻게 해야 하나요?</dt>
<dd>A)고객센터에 전화하여 접수한 후 안내에 따라 반품을 진행하시면 됩니다</dd>
</dl>
<dl> <!-- 공지사항 컨텐츠 -->
<dt>공지사항</dt>
<dd>이벤트 당첨 안내</dd>
<dd>이벤트 신청 안내</dd>
</dl>
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
안녕하세요 야무입니다. :-D
W3C HTML5 표준 기술문서의 예시를 살펴보면 어떤 경우에 사용하면 좋을지 이해하기 좋습니다. 함께 살펴봅시다. :-)
예제 1.
블랑코 데킬라(Blanco tequila)와 레포사도 데킬라(Reposado tequila)와 같은 데킬라 주류에 대한 간단한 설명 목록을 구조화 한 결과를 볼 수 있습니다. 예제를 살펴보면 언급하신 '용어에 대한 정의 컨텐츠', 'Q&A 컨텐츠'에 해당됩니다.
용어 - 설명 그룹 (a term-description group)
<dl> <dt>Blanco tequila</dt> <dd>The purest form of the blue agave spirit...</dd> <dt>Reposado tequila</dt> <dd>Typically aged in wooden barrels for between two and eleven months...</dd> </dl>
예제 2.
록 밴드 퀸(Queen)에 대한 정보를 멤버(Members) 별, 레코드 레이블(Record Labels)로 구분하여 설명한 목록입니다. 예제를 살펴보면 언급하신 '특정 내용에 대한 소개 컨텐츠' 또한
<dl>
로 구조화할 수 있다는 사실을 확인할 수 있습니다.※ 참고로 EMI(Electric and Musical Industries) 그룹은 영국의 레코드 레이블 그룹이자 한때 세계 4대 메이저 레이블로 손꼽힐 정도로 유명합니다.
용어 - 설명 그룹 (The order of term-description groups)
<p>Information about the rock band Queen:</p> <dl> <dt>Members</dt> <dd>Brian May</dd> <dd>Freddie Mercury</dd> <dd>John Deacon</dd> <dd>Roger Taylor</dd> <dt>Record labels</dt> <dd>EMI</dd> <dd>Parlophone</dd> <dd>Capitol</dd> <dd>Hollywood</dd> <dd>Island</dd> </dl>
예제 3.
'명령어 순서를 나열'하는데도
<dl>
요소를 사용해 구조화할 수 있습니다. 이해를 돕기 위해 콘텐츠를 번역했습니다. 문장 구문을 살펴보면 JavaScript 조건문 (if ~ else
)을 문장으로 나열한 것입니다. 이와 같은 경우에도 설명 목록을 사용할 수 있습니다.<p>승점(victory points)을 다음과 같이 결정합니다.<br> (다음 유형 중 첫 번째로 일치하는 경우만 해당됩니다)</p> <dl> <dt>금화가 정확히 5개인 경우</dt> <dd>승점 5 점 획득</dd> <dt>금화가 하나 이상 있고, 은색 동전이 하나 이상 있는 경우</dt> <dd>승점 2 점 획득</dd> <dt>은색 동전이 하나 이상 있는 경우</dt> <dd>승점 1 점 획득</dd> <dt>그렇지 않으면</dt> <dd>승점을 얻지 못합니다.</dd> </dl>
변경 사항 검토
HTML 5.2 표준 문서에서 거론된 예시는 아니지만
<dt>
,<dd>
요소를 하나 이상 감싸는<div>
요소를<dl>
내부에 구성할 수 있습니다. 참고로<dl>
내에 사용 되는<div>
요소는 하나 이상의<dt>
,<dd>
를 감싸는 용도로만 사용할 수 있습니다. 그리고<div>
와<dt>
,<dd>
요소는 형제 노드여서는 안됩니다.<p>승점(victory points)을 다음과 같이 결정합니다.<br> (다음 유형 중 첫 번째로 일치하는 경우만 해당됩니다)</p> <dl> <div> <dt>금화가 정확히 5개인 경우</dt> <dd>승점 5 점 획득</dd> </div> <div> <dt>금화가 하나 이상 있고, 은색 동전이 하나 이상 있는 경우</dt> <dd>승점 2 점 획득</dd> </div> <div> <dt>은색 동전이 하나 이상 있는 경우</dt> <dd>승점 1 점 획득</dd> </div> <div> <dt>그렇지 않으면</dt> <dd>승점을 얻지 못합니다.</dd> </div> </dl>
사용 시, 알아두어야 할 점
다음은
<dl>
,<dt>
,<dd>
요소를 사용해 구조화 할 때 알아두어야 할 점을 나열한 것입니다.<dl>
요소에<dt>
또는<dd>
자식 요소가 포함되지 않으면, 용어 설명 그룹이 아니게 됩니다.<dl>
요소에 하나 이상의 공백이 아닌 텍스트 노드 하위 항목이 있거나,<dt>
,<dd>
요소가 아닌 하위 항목이있는 경우 이러한 모든 텍스트 노드와 요소는 물론 해당 하위 항목도 모든 용어 설명 그룹의 일부를 구성할 수 없습니다. (<dt>
,<dd>
요소 포함)<dl>
요소가 1개 이상의<dt>
요소를 포함<dd>
요소는 포함하지 않은 경우, 설명 없는 용어 그룹입니다.<dl>
요소가 1개 이상의<dd>
요소를 포함<dt>
요소는 포함하지 않은 경우, 용어 없는 설명 그룹입니다.<dl>
요소의 첫번째 자식 요소가<dd>
요소일 경우, 첫 번째 그룹은 연관된 용어가 없게 됩니다.<dl>
요소의 마지막 자식 요소가<dt>
요소일 경우, 마지막 그룹은 연관된 설명이 없게 됩니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
댓글 입력