HTML div, span 태그 사용법과 차이

HTML

HTML div, span 태그 사용법과 차이

 

환경: Eclipse Mars, HTML5

 

<div> <span> 태그는 영역을 설정할 때 필요합니다. 웹 페이지에 레이아웃을 구성하고자 할 때 없어서는 안 되는 태그입니다. 그럼 두 태그의 차이는 무엇일까요? 두 가지가 있습니다. 하나는 줄 바꿈 입니다. div 는 줄 바꿈이 되지만 span 태그는 옆으로 붙습니다. 두 번째 차이는 영역을 지정하는 방식의 차이입니다. 텍스트를 표현할 때 div 는 사각형 박스로 구역을 정하지만 span 은 문장 단위로 지정합니다. 샘플을 통해서 자세히 알아 보겠습니다.

 

1. div, span 태그 영역 설정의 차이

 

아래 샘플처럼 div, span 태그로 동일한 문장을 감쌌습니다. 결과 화면을 보면 차이가 있죠. div 는 박스 형태로 영역이 설정되고 그 안에 정렬됩니다. 하지만 span 은 줄 단위로 영역이 설정되기 때문에 배경색의 길이가 틀리죠. 그리고 div width, height 크기 지정이 가능하지만 span inline 속성을 가지기 때문에 정해 줄 수 없습니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	#div1 {
		background-color: #F9F249;
		padding: 10px;
	}
	#span1 {
		background-color: #36FFFF;
	}
</style> 
</head>
<body>
	<div id="div1">
		Koreans are in general pessimistic about the socio-economic 
		circumstances surrounding them, a survey shows.
		Among different age groups, college students and job 
		seekers were most pessimistic, because of the tough 
		job market. The findings are based on market research firm 
		Macromillembrain’s survey on five age groups each 
		with 200 people _ a total of 1,000. The groups included 
		college students and job seekers, office workers aged 20-39, 
		office workers in their 40s and office workers in their 50s.
	</div><br/>
	<span id="span1">
		Koreans are in general pessimistic about the socio-economic 
		circumstances surrounding them, a survey shows.
		Among different age groups, college students and job 
		seekers were most pessimistic, because of the tough 
		job market. The findings are based on market research firm 
		Macromillembrain’s survey on five age groups each 
		with 200 people _ a total of 1,000. The groups included 
		college students and job seekers, office workers aged 20-39, 
		office workers in their 40s and office workers in their 50s.
	</span>
</body>
</html>

HTML div, span 태그 사용법과 차이

 

좀더 쉽게 알아보기 위해 border 를 적용해서 라인을 그어 보겠습니다. div 는 박스 외각에 라인이 그어져 있고 span 은 문장 한 줄 마다 라인이 그어져 있습니다. 그리고 쭉 이어지다가 마지막에 박스가 닫히게 됩니다.

HTML div, span 태그 사용법과 차이

 

2. div, span 줄 바꿈 차이

 

샘플은 div span 3개씩 만들어서 차례대로 나열했습니다. div 는 하나씩 표현될 때마다 앞 뒤로 줄 바꿈이 일어나서 아래에 내려갑니다. 그런데 span 태그는 옆으로 배열이 됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		width: 300px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
	}
	#div1 {background-color: #F9F249;}
	#div2 {background-color: #69F354;}
	#div3 {background-color: #36FFFF;}
	
	span {
		width: 100px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
	}
	#span1 {background-color: #F9F249; padding: 5px;}
	#span2 {background-color: #69F354;}
	#span3 {background-color: #36FFFF;}
</style>
</head>
<body>
	<div id="div1">div 1 box</div>
	<div id="div2">div 2 box</div>
	<div id="div3">div 3 box</div>
	<span id="span1">span 1 box</span>
	<span id="span2">span 1 box</span>
	<span id="span3">span 1 box</span>
</body>
</html>

HTML div, span 태그 사용법과 차이

 

또 다른 특이점은 div margin 4방향 모두 적용이 되며 위 아래 겹쳐지는 여백은 상쇄됩니다. 그러니까 여백의 크기가 더해서 2배가 되는 것이 아니라 겹쳐지는 것이죠. 그런데 span margin 은 양 옆으로만 적용되며 겹쳐지지 않습니다. 그래서 넓어 보입니다.

HTML div, span 태그 사용법과 차이

 

아래 그림처럼 margin 은 양 옆에만 있고 여백이 겹쳐지지 않아서 div 보다 더 넓어졌습니다.

HTML div, span 태그 사용법과 차이

 

 

Posted by 녹두장군