각종 목록을 표현하는 요소인 <ul>과 <ol> 외에 정의형 목록인 dl 요소가 있습니다.
<dl>은 definition list의 약자로 용어로 구성된 목록입니다.
<dl> 안에는 <dt>와 <dd>요소를 넣을 수 있는데요.
<dt>는 definition term
<dd>은 definition description의 약자입니다.
<dt>와 <dd>의 차이점은 특별하게 차이점은 아래와 같습니다.
<dt> : 인라인 요소이며 인라인 요소와 텍스트를 포함
<dd> : 블록 레벨 요소로 인라인 요소와 텍스트를 포함
예제를 먼저 보겠습니다.
<dl> 사이에 <dt>와 <dd>를 입력합니다.
<body>
<dl>
<dt>Definition List</dt>
<dd>H</dd>
<dd>T</dd>
<dd>M</dd>
<dd>L</dd>
<dd>5</dd>
</dl>
</body>
소스 파일 다운 : 
html5_3_1.html
위의 예제는 아래와 같은 결과가 출력됩니다.
특별하게 다른 점은 없다고 생각하시겠지만, 정의를 한다는 것에 대한 의의가 있습니다.
정의를 한 메뉴에 <ul> 혹은 <ol>을 사용한 서브 메뉴가 있다고 하면 어떻게 될까요?
<body>
<dl>
<dt>Definition List</dt>
<dd>H</dd>
<ul>
<li>Nickoo's</li>
<li>Blog</li>
</ul>
<dd>T</dd>
<ol>
<li>첫번째</li>
<li>두번째</li>
</ol>
<dd>M</dd>
<dd>L</dd>
<dd>5</dd>
</dl>
</body>
소스파일 다운로드 : html5_3_2.html
아래와 같은 결과를 출력할 수 있습니다.
다음 시간에는 테이블 구조에 대해 배워보겠습니다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| 앵커(Anchor) (0) | 2015.08.07 |
|---|---|
| 테이블 요소 (0) | 2015.08.02 |
| HTML5 기본 태그(2) (0) | 2015.07.24 |
| HTML5 기본 태그(1) (0) | 2015.07.15 |
| HTML5 기본구조 (0) | 2015.07.13 |