[HTML] <div>와 <span>태그

1. <div>

<div> 태그는 HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용합니다. HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너로 자주 사용됩니다. CSS와 함께 웹 페이지의 레이아웃을 설정하는데도 종종 사용됩니다. 대표적인 블록(block) 요소입니다.

 

2. <span>

<span> 태그는 HTML 문서에서 인라인 요소들을 하나로 묶을 때 사용합니다. <span> 요소는 그 자체만으로는 어떤 의미도 가지지 않습니다. 하지만 class, id 같은 속성을 함께 사용하여 요소를 그룹화하거나 속성을 공유하는 데 유용합니다. 대표적인 인라인(inline)요소입니다.

 

3. div와 span 비교

• 둘 다 그 자체로는 의미를 가지지 않습니다. 구역을 나누는 태그로 그 자체로는 랜더 상 아무것도 보이지 않습니다.
• block과 inline 요소의 차이점과 동일합니다. div는 블록 요소이기에 자동으로 줄바꿈이 일어나면서 전체 넓이를 100% 차지하는 것이 기본값입니다. 반면, span은 태그 내 요소가 차지하는 영역만 차지하며 자동으로 줄바꿈이 일어나지 않습니다.
• 이것도 요소 기본 차이점과 동일하게, div는 상하좌우 마진, 패딩, width, height 조절이 가능하지만, span은 좌우 마진, 상하좌우 패딩값만 조절이 가능합니다.

 

예제를 통해 차이점을 살펴보면,

 

예제

결과

 

div-연두색

span-하늘색

 

div의 경우 박스 형태로 영역이 설정되고 그 안에 정렬됩니다. 외각에 줄이 그어진 것을 볼 수 있습니다. 반면, span은 줄단위로 영역이 설정되기 때문에 배경색의 길이가 다릅니다. 그리고 문장 한 줄마다 라인이 그어져 있으며 마지막에 박스가 닫히는 형태입니다.

 

이번엔 박스를 3개씩 만드는 예제로 설명하겠습니다. 

예제

결과

 

div는 블록 요소로 하단에 쌓이는(자동 줄바꿈) 반면, span은 인라인 요소로 우측으로 쌓이는 것을 볼 수 있습니다.

또한 div와 span 마진값을 동일하게 10px로 주었는데, div는 모든 방향 적용되어 겹쳐지는 여백은 상쇄됩니다. 반대로 span 요소는 좌우 마진값만 적용되며 여백이 겹쳐지지 않습니다.

 

따라서 원래라면, div의 width 값을 300px, span width 값을 100px로 주고 margin 값도 동일하기 때문에 div 박스가 끝나는 길이와 span 3 박스가 끝나는 길이가 동일해야 합니다. 하지만 이러한 특성 때문에 span 박스가 끝나는 지점이 div 박스보다 더 길어진 것을 볼 수 있습니다.