div와 span

<div>와 <span> 이 두 태그는 영역을 설정할 때 필요한 태그입니다.
두 태그들은 태그 안에 존재하는 여러 요소들을 하나의 공통 태그로 묶어 관리할 수 있게
해주는 태그들입니다.

그러나 태그가 굳이 2개로 나뉘어져 있듯이, 서로 다른 점 또한 있습니다.
태그 <div>는 block level element의 속성을 띄고 있어 한 줄의 행 전체를 차지하는 탓에
그 다음 요소는 자연스레 밑으로 줄바꿈 처리가 되지만,
태그 <span>은 inline element의 속성을 띄고 있어 한 줄을 다 차지하지 않고
자신의 content만큼의 공간만 차지합니다.
그로인해 다음에 오는 요소는 남는 공간만큼 같은 행에서 출력되는 인라인 속성을 띕니다.

이걸 한 마디로 요약하자면, div는 자동으로 줄 바꿈이 되고, span은 자동으로 줄 바꿈이 되지 않습니다.

<!-- div와 span의 차이 -->

content
content
content
<div class="box">content</div>
<div class="box">content</div>
<div class="box">content</div>











content content content


<span class="box2">content</span>
<span class="box3">content</span>
<span class="box4">content</span>

span은 div처럼 직접적으로 width, height 영역 지정이 안된다.