W3C의 HTML 4.01 표준권고안
(번역)에 따르면 span과 div는 모두 그룹화 엘러먼트(grouping elements)로서, 엘러먼트가 포함하는 내용물이 inline-level이냐, block-level이냐 하는 것을 정의하는 것 외에는 다른 역할이나 차이점이 전혀 없습니다. inline-level과 block-level의 차이점은 구글링만 하면 무수히 나올테니 생략하고, 이제부터는 실용적인 접근을 해보겠습니다.
첫 번째, 공간을 어떻게 차지하는가
가장 두드러진 차이점은 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> 문장 중간에도 들어갈 수 있습니다.[출처] : http://chatii.tistory.com/entry/Difference-between-DIV-and-SPAN-Tags
'프로그램 > Html & Js & Css' 카테고리의 다른 글
| word-break:break-all / word-wrap:break-word (강제줄바꿈) (0) | 2009.06.16 |
|---|---|
| 다국어를 위한 문자셋(charset)과 코드페이지(codepage) (0) | 2009.06.02 |
| [펌] - innerHTML 을 사용할 때 속도를 위한 주의사항 (0) | 2009.04.28 |
| [JS] - 자바스크립트에서 많이 사용하는 Date 객체 (0) | 2009.04.02 |
| [JS] - 자바스크립트에서 많이 사용하는 Array (0) | 2009.04.02 |