div, span 태그의 차이

첫 번째, 공간을 어떻게 차지하는가

가장 두드러진 차이점은 div는 주어진 가로폭을 전부 차지하고 span은 그렇지 않다는 것입니다.

div입니다.

<div style="background-color: #FFFFCC;">div입니다.</div>
span입니다.
<span style="background-color: #FFFFCC;">span입니다.</span>

쉽게 구분되죠?

두 번째, 폭(width)과 높이(height)

또한 div는 폭과 높이를 지정할 수 있지만 span은 그렇지 않습니다.

div입니다. 폭과 높이를 가졌습니다.

<div style="background-color: #FFFFCC; width: 150px; height: 50px;">div입니다. 폭과 높이를 가졌습니다.</div>
span입니다. 폭과 높이가 적용되지 않습니다.
<span style="background-color: #FFFFCC; width: 150px; height: 50px;">span입니다. 폭과 높이가 적용되지 않습니다.</span>

text-align, float 등의 속성도 마찬가지로 block-level인 div에만 적용할 수 있습니다. 억지로 속성을 넣어봤자 효과는 전혀 없고, 웹 표준만 어기는 결과를 가져옵니다.

세 번째, 줄 바꿈

그리고 위 첫 번째 성질로 인해 div는 필연적으로 줄 바꿈을 동반합니다. width 속성을 주어서 폭을 줄여도 나머지 공간은 사용되지 않은 채로 남아 있습니다.

div 첫 번째입니다.

div 두 번째입니다.

div 세 번째입니다.

<div style="background-color: #FFFFEE;">div 첫 번째입니다.</div>
<div style="background-color: #FFFFCC; width: 150px;">div 두 번째입니다.</div>
<div style="background-color: #FFFF99; width: 150px;">div 세 번째입니다.</div>
span 첫 번째입니다. span 두 번째입니다. span 세 번째입니다.
<span style="background-color: #FFFFEE;">span 첫 번째입니다.</span>
<span style="background-color: #FFFFCC;">span 두 번째입니다.</span>
<span style="background-color: #FFFF99;">span 세 번째입니다.</span>
그리고 span은 이렇게 문장 중간에도 들어갈 수 있습니다.
그리고 span은 <span style="background-color: #FFFFCC;">이렇게</span> 문장 중간에도 들어갈 수 있습니다.

이상입니다. 앞으로 생각나면 더 추가하겠습니다.

출처 : chatii의 웹노트(http://chatii.textcube.com/45)