HTML div와span태그의 차이점

Html로 레이아웃을 꾸밀 때 필연적으로 사용하게 되는 태그가 있습니다.

바로 <div>와 <span>태그 입니다.

이 두태그는 비슷하면서도 다른데 차이점을 알아보겠습니다.

<div> -가로폭을 전부 차지합니다. -사각형 박스로 구역을 정합니다. -폭과 넓이를 지정할 수 있습니다. -사용할 때 마다 줄바꿈을 동반합니다.

<span> -태그 안의 내용만 차지합니다. -문장단위로 지정됩니다. -폭과 넓이 지정이 불가능합니다. -줄 바꿈 없이 중간에 들어갈 수 있습니다.

예제

가로폭을 전부차지하는 div와 달리 태그안의 내용까지만 차지하는 span

크기조정가능한 div(상자안에 있어요!!) 와 불가능한 span(문장단위로 지정이 되요!!)

필연적인 줄바꿈div와 줄바꿈이 없는 span