티스토리 뷰

반응형

div 태그와 span 태그는 웹 페이지의 영역을 설정 할 때 사용하는 태그입니다. 웹 페이지의 전체적인 레이아웃을 설정 할 때 사용하는 태그인셈이죠. 예전에는 table 태그를 사용하여 웹 페이지에 대한 전체적인 레이아웃을 구성하였던 반면 요즘 트렌드는 오늘 배울 div 태그와 span 태그를 통해서 구성을 하는 것이 일반적입니다.


[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그) 알아보러 가기!!



그럼 div 태그와 span 태그의 차이점과 사용법을 살펴보겠습니다.


 


  1. div 태그와 span 태그 비교


먼저 두 태그의 차이점은 줄바꿈입니다. div 태그의 경우 자동으로 줄바꿈이 되지만 span 태그의 경우네는 자동으로 줄바꿈이 되지 않습니다. 아래 샘플 소스를  참조해주세요.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>span 태그 / div 태그</title>
</head>
<body>
    <div>div 태그 영역 1</div>
    <div>div 태그 영역 2</div>
    <br /><br />
    <span>span 태그 영역1</span>
    <span>span 태그 영역2</span>
</body>
</html>
cs


두 개의 div 태그와 span 태그가 각각 사용되었습니다. 두 태그들 사이의 구분을 위해서 일부러 줄바꿈 태그 (br 태그)를 같이 넣어준 형태입니다. 아래 웹 페이지에 나오는 형태를 한번 보겠습니다.



분명 div 태그 영역1과 div 태그 영역2 사이에 <br/> 태그로 줄바꿈을 해주지 않았는데도 불구하고 div 태그 영역2가 줄바꿈이 된 채로 나타나는 것을 확인 할 수 있습니다. 반면에 span 태그의 경우는 줄바꿈이 되지 않고 한 줄에 다 나오는 것을 확인 할 수 있습니다.


두 태그의 두 번째 차이점은 영역의 차이입니다. div 태그의 경우 박스형태로 영역이 설정이 되고 span 태그의 경우에는 줄 단위로 영역이 설정이 됩니다. 아래 샘플예제를 한번 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
    <style>
        div, span {
            border : 2px solid red;
            background-color : blue;
        }
        span {
            background-color : green;
        }
    </style>
</head>
<body>
    <div>
         hellohellohellohellohellohellohellohellohellohellohellohellohellohello
         hellohellohellohellohellohellohellohellohellohellohellohellohellohello
         hellohellohellohellohellohellohellohellohellohellohellohellohellohello
    </div>
    <br/><br/>
    <span>
        hellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohello
        hellohellohellohellohellohellohellohellohellohellohellohellohellohello
    </span>
</body>
</html>
cs


내용은 div 태그와 span 태그를 통해 내용을 채워넣고 두 태그의 구분을 위해 background-color 속성과 border 속성값을 준 것입니다. 아래 웹페이지에 나타나는 형태를 한번 보겠습니다.



div 태그의 경우는 박스형태로 영역이 잡히고 그 안에 컨텐츠들이 쭈욱 나열 되고 있습니다. 반면에 span 태그의 경우는 줄 영역으로 영역이 잡히기 때문에 background-color가 컨텐츠 끝부분까지만 나오고 있는 것을 확인 할 수 있습니다.




  2. Block 속성과 Inline 속성


그렇다면 두 태그의 어떤 속성때문에 이러한 결과를 나타내는 것일까요 ? 결과를 말씀드리면 div 태그의 경우는 Block 속성에 해당하고 span 태그의 경우는 Inline 속성에 해당하는 태그들입니다. Block 속성의 경우 위에서 말씀드린 박스형태로 영역 구간이 잡히면서 다음 컨텐츠 태그가 자동으로 개행이 되는 속성입니다.


사실 이러한 block 속성을 가지는 태그들은 앞에서 공부 한 태그들에도 있었습니다. 웹 페이지의 제목을 나타내는 h 태그들 list 태그들처럼 말이죠.


[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그

[HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자


하나를 예로 이전글에서 h 태그를 쭈욱 나열한 샘플 예제가 있었습니다. 거기서도 마찬가지로 따로 <br />를 넣어주지 않았는데도 줄 바꿈이 된 채로 다음 컨텐츠가 오는 것을 확인 할 수 있었습니다.

반응형