Please Enable JavaScript!
Gon[ Enable JavaScript ]

HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법

웹 프로그래밍/HTML
반응형

<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 용어 정의할 때 사용하는 dl&#44; dt&#44; dd 태그 사용법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
HTML 입력양식 input 그 HTML5 추가된 type 타입 대한 설명
HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하기
HTML 하이퍼링크 a 태그로 사이트 연결하기
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법
반응형
Posted by 녹두장군1
,