반응형
<dl> 은 Definition List 의 약자로 용어 정의할 때 사용합니다. 내부에 2개의 태그를 포함해서 사용하게 되는데 <dt> 와 <dd> 가 있습니다. <dt> 는 Definition Title 약자로 제목을 나타내고 <dd> 는 Definition Data 로 용어의 설명이 위치하게 됩니다.
▼ 용어를 정의할 때 사용하는 <dl> 은 <dt>, <dd> 와 함께 아래와 형식과 같이 사용하게 됩니다. <dt> 는 없어도 되지만 설명하는 부분은 <dd> 태그 안에 들어가야 합니다.
<dl>
<dt>용어의 제목</dt>
<dd>용어의 설명</dd>
</dl>
▼ 기본적으로 <dl>, <dt>, <dd> 에 적용되는 CSS 값은 다음과 같습니다. 용어 설명이 들어가는 부분은 전체 들여쓰기 40px 이 적용되어 있습니다. 이것은 사용자가 CSS 를 이용해서 변경하시면 되겠죠.
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
dt {
display: block;
}
dd {
display: block;
margin-left: 40px;
}
▼ 아래 샘플처럼 dt 와 dd 는 한 묶음으로 계속해서 써 줄 수가 있습니다. 둘 다 줄 바꿈 기능이 포함되어 있습니다. 그런데 여러 묶음으로 제목과 설명 글을 연결한다면 문단 구분이 가도록 수정을 해야겠네요. 간단하게 <dd> 태그에 margin-bottom: 20px; 을 적용하면 될 것 같습니다.
dd { margin-bottom: 20px; }
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
dd {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h3>르네상스</h3>
<dl>
<dt>르네상스의 뜻과 기원</dt>
<dd>르네상스(프랑스어: Renaissance, 이탈리아어: Rinascimento[1])
또는 문예 부흥(文藝復興), 학예 부흥(學藝復興)은 유럽 문명사에서
14세기부터 16세기 사이에 일어난 문예부흥 운동을 말한다. 과학
혁명의 토대가 만들어져 중세를 근세와 이어주는 시기가 되었다.
여기서 문예부흥이란 구체적으로 14세기에서 시작하여 16세기 말에
유럽에서 일어난 문화, 예술 전반에 걸친 고대 그리스와 로마 문명의
재인식과 재수용을 의미한다.
</dd>
<dt>르네상스의 시작</dt>
<dd>르네상스를 시간적, 지역적으로 명확히 구분할 수는 없다. 여러
곳에서 점진적으로 시작된 것이며 마찬가지로 중세가 언제 어디서
끝나는지도 얘기할 수 없다. 보통 이탈리아 중부 피렌체에서 시작되었다고
보고 있다.
</dd>
</dl>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 ▶ HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하기 ▶ HTML 하이퍼링크 a 태그로 사이트 연결하기 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 |
반응형
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
|---|---|
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
| HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 (0) | 2022.11.01 |
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
