DTD 명세(http://www.w3.org/TR/1999/REC-html401-19991224/struct
/lists.html#edef-DD) 에 따르면,
라고 쓰여 있습니다.DL(Definition lists)은 DT(definition term), DD(definition description)와 함께 쓰인다.
DT, DD의 순서에 상관이 없다.
DT에는 인라인요소만 갖을 수 있다,
DD에는 블록요소와 인라인요소 모두 갖을 수 있다.
DT와 DD중 하나만 있어도 된다.
DT와 DD는 여는 태그는 필요하지만 닫는 태그는 생략해도 상관없다
즉, 이렇게도 쓸 수 있지만,
이렇게,
<DL>
<DT>Dweeb
<DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
<DT>Cracker
<DD>인터넷 해거(hacker)
<DT>Nerd
<DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
</DL>
<DL>
<DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
<DT>Dweeb
<DD>인터넷 해거(hacker)
<DT>Cracker
<DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
<DT>Nerd
</DL>
또는 이렇게 써도 틀리진 않다는 것입니다.
<DL>
<DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
<DD> 인터넷 해거(hacker)
<DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
</DL>
약간 의아하지만, 스펙에는 분명히 그렇게 정의되어 있네요.
우리가 모르는 히스토리가 있었지 않을까요?
이 부분 때문에 많은 논란이 있어 왔고 HTML5에서는 조금 엄격하게 스펙 정의가 되었다고 합니다.
HTML 5에 정의된 DL, DT, DD 에 대한 정의는 아래 URL을 참고하세요
http://dev.w3.org/html5/markup/dl.html
http://dev.w3.org/html5/markup/dt.html
http://dev.w3.org/html5/markup/dd.html
무슨 히스토리가 있었는지는 모르겠지만,
가 능하면 <dt>와 <dd>의 순서도 지키고 <dt>가 있으면 <dd>도 생략 하지 않는게 더 의미있는 마크업일 것 같습니다.
웹표준 dl, dt, dd 정의목록 태그 css로 정의하기
/**
* <DL, DT, DD
/------------------------------------------------------------------
*/
//
dl { margin:0; }
dt { margin:0; }
dd { margin:0; padding-right:3px;
}
// dd 기본 사용시
<dl>
<dt>apmsoft 의 apm의
뜻은?</dt>
<dd>a : 아파치(apache)</dd>
<dd>p :
PHP</dd>
<dd>m : MYSQL</dd>
</dl>
# 결과
-->
apmsoft의 apm의
뜻은?
a :
아파치(apache)
p :
PHP
m :
MYSQL
<help>
위와 같이 출력 된다.
기본적으로 dl, dt,
dd 태그는 블록적 성격을 가진다.
그래서 한줄씩 출력하게 된다.
/**
* <DL,
DT, DD
/------------------------------------------------------------------
*/
//
dl { margin:0; }
dt { margin:0; }
dd { margin:0; display:inline;
padding-right:3px; }
// dd 를 inline 으로 설정 했을 경우
<dl>
<dt>apmsoft 의 apm의 뜻은?</dt>
<dd>a :
아파치(apache)</dd>
<dd>p : PHP</dd>
<dd>m :
MYSQL</dd>
</dl>
apmsoft의 apm의
뜻은?
a :
아파치(apache) p :
PHP m : MYSQL
inline 을 설정해 주면
세로가 아닌 가로로 출력을 하게 된다.
dl dt dd 를 사용하게 되면
리스트 적인 의미를 담은 글이 되기 때문에
성공적인 코딩이라 말할 수 있겠다
[출처] dl, dt, dd 태그 css로 정의하기|작성자 멋쟁이