<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>
▼ 좀더 쉽게 알아보기 위해 border 를 적용해서 라인을 그어 보겠습니다. div 는 박스 외각에 라인이 그어져 있고 span 은 문장 한 줄 마다 라인이 그어져 있습니다. 그리고 쭉 이어지다가 마지막에 박스가 닫히게 됩니다.
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML form 태그 사용하는 다양한 방법 ▶ HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 ▶ HTML 특수문자 출력, 공백을 적용할 수 있는 코드 ▶ HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 |
| 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>
▼ 또 다른 특이점은 div 의 margin 은 4방향 모두 적용이 되며 위 아래 겹쳐지는 여백은 상쇄됩니다. 그러니까 여백의 크기가 더해서 2배가 되는 것이 아니라 겹쳐지는 것이죠. 그런데 span 의 margin 은 양 옆으로만 적용되며 겹쳐지지 않습니다. 그래서 넓어 보입니다.
▼ 아래 그림처럼 margin 은 양 옆에만 있고 여백이 겹쳐지지 않아서 div 보다 더 넓어졌습니다. .
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML form 태그 사용하는 다양한 방법 ▶ HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 ▶ HTML 특수문자 출력, 공백을 적용할 수 있는 코드 ▶ HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 |
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| 윈도우 메모장에 HTML 문서 작성하는 방법 (1) | 2024.02.20 |
|---|---|
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
| HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 (0) | 2022.11.01 |
