HTML을 공부하다보면 태그들 사이에 차이점이 궁금한 것들이 있다. 대표적으로 <div>와 <span>인데, 표면적으로는 그게 그거 같아서 헷갈릴만하다.
가장 쉽게 이해하는 방법은 구글 크롬의 개발자 도구를 켜서 아래와 같이 보는 것이다.
한 줄 전체를 차지하는지 여부 차이를 보기
<div>
개발자 도구에서 <div> 영역에 마우스를 갖다 대면 한 줄 전체를 차지하고 있는 것을 볼 수 있다.
<span>
개발자 도구에서 <span> 영역에 마우스를 갖다 대면 한 줄 전체가 아닌, 컨텐츠(글자 수와 여백 등 포함)의 크기만큼만 차지하고 있는 것을 볼 수 있다.
줄바꿈 가능 여부 차이
<div>
<!--줄바꿈이 되어 병렬적으로 나옴--><div>div 태그 영역 1</div>
<div>div 태그 영역 2</div>
<br /><br />
HTML
복사
<span>
<!--줄바꿈이 안 되고 나란히 한 줄에 다 나옴--><span>span 태그 영역1</span>
<span>span 태그 영역2</span>
HTML
복사
코드로 작성된 화면은 아래와 같다.
두 단어를 <div>과 <span>태그로 똑같이 작성했는데 결과 화면을 보니 <div>는 병렬적으로 배열되고, <span>은 한 줄에 나란히 배열되었다. 이 말은 즉, <div>는 줄바꿈이 된다는 뜻이고 <span>은 줄바꿈이 되지 않기 때문에 나란히 배열된 것이다.
태그 영역의 차이
<div>는 박스 형태로 영역이 설정되고 박스 안에 정렬된다. 하지만 <span>은 줄 단위로 영역이 설정되기 때문에 배경색의 길이가 다르다. 더불어 <div>는 block 속성을 가지기에 width, height 지정이 가능하지만 <span>은 inline 속성을 가지기 때문에 불가하다는 점도 참고하자.
정리하자면
div | span |
줄바꿈 가능한 content division | 줄바꿈 불가한 content container |
한 줄을 차지함 | content 크기만큼 공간을 차지함 |
블록 요소 | 인라인 요소 |