div, span 태그의 차이점

width를 입력하지 않았을 경우
div는 주어진 가로폭을 전부 차지하고 span은 그렇지 않다.

div입니다.

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

 

또한 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> 문장 중간에도 들어갈 수 있습니다.