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 녹두장군

댓글을 달아 주세요

  1. Favicon of https://prolite.tistory.com IT세레스 2015.12.01 01:55 신고  댓글주소  수정/삭제  댓글쓰기

    저도 항상 헷갈렸던 태그인데 이렇게 정리를 잘 해주시니 정말 이해가 됩니다.^^
    감사합니다.!

  2. Favicon of https://hyojae.tistory.com HYOJAE FELIX 2016.02.11 13:22 신고  댓글주소  수정/삭제  댓글쓰기

    이제 막 html과 css를 시작하는 중인데 예제까지 보여주며 너무 설명을 잘 해주셔서 감동이네요. 감사합니다.
    여기에 와서 공부해야겠어요...^^

  3. 2016.02.17 04:12  댓글주소  수정/삭제  댓글쓰기

    정말 너무 좋은글이였습니다. 감사합니다.

  4. 2016.02.17 04:12  댓글주소  수정/삭제  댓글쓰기

    정말 너무 좋은글이였습니다. 감사합니다.

  5. 하얀달 2016.02.29 14:48  댓글주소  수정/삭제  댓글쓰기

    수업중 궁금한점이 있어 찾아보다가 들어오게 되었습니다.

    코드들 중에
    <style type="text/css"> 이 단락의 쓰임새는 무엇인지 궁금하네요 ~

    • Favicon of https://mainia.tistory.com 녹두장군 2016.02.29 19:03 신고  댓글주소  수정/삭제

      HTML 태그를 해석하는 과정에서 <style type="text/css"> 영역에 있는 데이터는 CSS 코드이므로 그에 맞게 코드를 실행하라는 뜻입니다. 이렇게 구분해 놓지 않으면 웹 브라우저가 코드를 해석할 때 javascript 인지, CSS 인지 구분할 수가 없잖아요.

  6. Carl 2018.01.02 11:56  댓글주소  수정/삭제  댓글쓰기

    녹두님 감사합니다. div태그와 span태그 사용의미와 차이점 잘 보고 갑니다.^^

  7. 원반 2018.10.05 03:14  댓글주소  수정/삭제  댓글쓰기

    이해하기 쉽게 잘 설명해서 도움이 많이 되었습니다.
    한가지 궁금한점이 있어 문의글 남깁니다.
    링크를 div박스 안에 뜨게하려면 어떻게 해야 하는지요?
    타겟을 해당 박스 id를 줘도 윈도 창으로 뜨게 되네요.
    =====
    소스는 안올라가서 링크 주소를 남깁니다.

    http://socialte.dothome.co.kr/webftp/php/connector.php?host=112.175.184.92&user=socialte&pass=te832527&cmd=file&target=f1_YmFjay9kaXYxLmh0bWw

  8. 원반 2018.10.06 00:50  댓글주소  수정/삭제  댓글쓰기

    답변 감사합니다.
    아이프레임으로 하니까 잘 되네요.
    며칠째 고생하고 있는데 해결되어서 넘 감사드리고요...

    그런데 하다보니까 네이버 같은 사이트는 안되더라고요
    아이프레임 적용을 막아놓은것 같은데...
    이럴 경우에는 어떤 방법이 있을까요?

    • Favicon of https://mainia.tistory.com 녹두장군 2018.10.06 08:52 신고  댓글주소  수정/삭제

      http://mainia.tistory.com/873 이거 참고해 보세요. 예전에 작성한 건데 div 내에 사이트 띄우는 방법입니다. 저도 깜빡하고 있었네요 ㅋㅋ

  9. 원반 2018.10.12 12:25  댓글주소  수정/삭제  댓글쓰기

    웹 폴더안에 index.html과 shadowbox.js과 shadowbox.css 의 3개 파일을 넣고 html을 실행하면 쉐도박스가 안뜨네요. 어디가 잘못된 것일까요? 아래 링크를 걸었습니다.


    http://socialte.dothome.co.kr/webftp/php/connector.php?host=112.175.184.92&user=socialte&pass=te832527&cmd=file&target=f1_dGVzdC9zaGRvd2JveDEvaW5kZXguaHRtbA

    http://socialte.dothome.co.kr/webftp/php/connector.php?host=112.175.184.92&user=socialte&pass=te832527&cmd=file&target=f1_dGVzdC9zaGRvd2JveDEvc2hhZG93Ym94LmNzcw

    http://socialte.dothome.co.kr/webftp/php/connector.php?host=112.175.184.92&user=socialte&pass=te832527&cmd=file&target=f1_dGVzdC9zaGRvd2JveDEvc2hhZG93Ym94LmNzcw

  10. 굿 2019.08.16 03:02  댓글주소  수정/삭제  댓글쓰기

    굿

  11. dh 2019.08.21 14:01  댓글주소  수정/삭제  댓글쓰기

    정말 좋은 설명 감사합니다