반응형
2020/03/24 - [HTML] - [html 태그] ol, ul 태그 (목록 태그)
이 전에 포스팅 했던 ol, ul 등의 일반적인 목록형 태그 외에
정의형 목록을 나타내는 태그도 html 존재한다.
바로 dl 태그인데,
이 태그는 ol과 ul이 li태그와의 짝을 이루듯
dl태그도 하나 이상의 dt태그와 하나 이상의 dd 태그로 짝을 이룬다.
(!) 반드시 dl태그 안에는 dt, dd태그만 위치할 수 있다.
<dl>
<dt></dt>
<dd></dd>
</dl>
위와 같은 기본 구성을 담고있다.
1. <dl> 태그 (Definition List)
말 그대로 정의 목록을 나타내는 태그이다.
특정 용어에 대해 정의하는 제목과 그 제목에 대한 설명을 담는다.
기본적으로 block요소의 속성을 갖고 있다.
2. <dt> 태그 (Definition Term)
정의 되는 용어에 대한 제목을 나타낸다.
기본적으로 block요소의 속성을 갖고 있다.
3. <dd> 태그 (Definition Description)
정의된 제목에 대한 설명을 나타낸다.
기본적으로 block요소의 속성을 갖고 있다.
4. 정의형 목록 스타일
<dl>
<dt>정의 제목</dt>
<dd>정의 설명</dd>
</dl>
기본적으로 dt와 dd 태그를 따로 스타일을 주지 않고 출력을 하게되면
dd태그의 들여쓰기가 된 상태에서 출력이 된다.
그래서 원하는 화면을 만들기 위해서는
margin값을 조정하거나 float, display:inline-block 등 별도의 스타일을 추가해야한다.
또한 여러개의 dt태그와 하나의 dd태그의 구성,
하나의 dt태그와 여러개의 dd태그의 구성 등의 표현이 가능하다.
<dl>
<dt>정의 제목1</dt>
<dt>정의 제목2</dt>
<dt>정의 제목3</dt>
<dd>정의 설명</dd>
</dl>
<dl>
<dt>정의 제목1</dt>
<dt>정의 제목2</dt>
<dt>정의 제목3</dt>
<dd>정의 설명1</dd>
<dd>정의 설명2</dd>
<dd>정의 설명3</dd>
</dl>
<dl>
<dt>정의 제목</dt>
<dd>정의 설명1</dd>
<dd>정의 설명2</dd>
<dd>정의 설명3</dd>
</dl>
반응형
'Frontend > HTML' 카테고리의 다른 글
[html 태그] address 태그 (0) | 2020.07.04 |
---|---|
[html 태그] hn태그 (h1, h2, h3, h4, h5, h6) (0) | 2020.04.03 |
[html 태그] p태그 (0) | 2020.03.25 |
[html 태그] ol, ul 태그 (목록 태그) (0) | 2020.03.24 |
[html 태그] a태그 (0) | 2020.03.06 |