div 태그와 span 태그의 차이점

이전 글에서는 줄바꿈 기능을 하는 br 태그와 단락을 나누는 p 태그 즉, 기능이 있는 태그에 대해 알아보았습니다. 이와 반대로 div 태그와 span 태그는 의미가 없는 것이 특징인데 영역을 나눌 때 사용합니다.

p 태그와 br 태그의 차이점

영역 설정의 차이점

두 태그의 차이점을 한눈에 볼 수 있는 방법이 있습니다. 바로 개발자 도구를 이용해서 말이죠.

<div>div 태그</div>
<span>span 태그</span>

어떠신가요? 한눈에 알아보실 수 있으신가요? div 태그의 경우 가로폭을 전부 차지하고 있고, span 태그의 경우 텍스트 주변에만 치지하고 있습니다. 때문에 div 태그의 경우 가로, 세로 폭을 사용자 마음대로 값을 지정할 수 있습니다. 하지만, span 태그의 경우는 그렇지 못합니다.

조금 더 쉽게 설명해드겠습니다. 위 사진을 보면 더 쉽게 이해하실 수 있습니다. div 태그는 한 단락 전체를 대상으로 박스 라인이 그려져 있지만, span 태그의 경우 한 줄 마다 라인이 그려져 있습니다.

※ 나중에 다뤄볼 css에서 display 속성에서 div 태그는 block, span 태그는 inline 속성값으로 대입할 수 있습니다. 즉, block의 경우 가로 화면 전체를 차지하고 inline의 경우 한 줄만 차지합니다.