<div>와 <span>태그

Div 태그와 span 태그의 차이점에 대해 알아볼것이다.
<div>와 <span> 태그는 사용자가 원하는 요소를 태그로 묶어 관리하기 용이하도록 한다.
그렇다면 <div>와 <span>태그는 어떤 차이점이 있는것일까?

<div>태그는 기본적으로 블록레벨 엘리먼트고, <span>태그는 인라인 엘리먼트이다.

다음 그림을 보자.

​

그림과 같이 블록 레벨 엘리먼트는 간단히 말해서 해당 요소가 페이지의 왼쪽에서 오른쪽 끝까지 차지하는것이다.
워드를 작성할 때 이미지를 첨부하면 해당 위치에 있던 문자들이 이미지 밑으로 밀려나는것을 생각하면 이해하기 쉽다.

인라인 엘리먼트는 해당 요소가 있는 부분의 공간만 사용을 하는것이다.
마찬가지로 워드에서 이미지 첨부 후 편집을 통해 이미지 옆에 문자들이 작성될 수 있도록 설정하는것을 생각하면 이해하기 쉽다.

<div>태그는 width와 height 속성 값에 영향을 받는다. 하지만 <span>태그는 요쇼가 차지하는 공간만을 사용하기 때문에 width와 height값에 영향을 받지 않는다.