[html] div와 span의 차이

div와 span의 차이에 대해서 살펴보겠습니다.

다음 코드를 작성하고 크롬 브라우저에서 오른쪽 마우스로 검사를 클릭하면 차이를 명확하게 볼 수 있습니다.

   tag이전<div>div는 block level 로서 수평공간 전체와 content크기만큼의 수직 공간을 가집니다.
        <span>span은 inline element로서 tag에 할당된 범위만 차지합니다.</span> 이상입니다.
        </div>tag이후

div에 해당하는 것을 클릭하는 경우 한 줄 전체가 해당함을 확인할 수 있고

span에 해당하는것을 클릭하면 span의 영역만 해당함을 확인할 수 있습니다.

 

div의 범위

span의 범위

다시한번 설명드리자면, div는 block level에 해당하고 수평공간 전체와 컨텐츠 크기만큼의 수직 공간을 차지합니다. 반면에 span은 inline elemnt로 tag에 할당된 범위만 차지합니다.