div와 span

div와 span의 차이점

div와 span은 레이아웃을 구성할때 꼭 필요한 태그들입니다.
보여지는건 비슷한것같지만 둘의 다른점은 무엇일까요?

div는 태그를 쓰면 자동으로 줄바꿈이 일어나는 반면 span은 줄바꿈이 일어나지 않으며 나란히 배치가 가능합니다.



이유는 div는 block속성, span은 inline 속성을 갖기때문입니다.

block

책장이 있다고 치면 block은 책장의 한 줄이다. 새로운 줄을 만들어차지하며 가로크기가 부모요소의 100%를 차지한다. 가로(width),세로(heigh)를 지정할수 있다.

block 속성을 가지는 태그들은 div,p가있다.

inline

block이 책 장의 한줄이라면 inline은 책장에 꽂혀있는 책이다.

가로와 세로를 사용자임의로 조절할수없으며 내용의 길이나 사이즈로 인해 크기가 결정된다.

2.span은 inline속성이기때문에 div,p태그를 품을 수 없다.

<style>
    div {
	background-color: yellow;
}
p {
    background-color: red;
}
span {
    background-color: pink;
}
</style>
<div ><p>div가 p를 품었다 </p></div>
<div ><span>div가 span을 품었다</span></div>
<span><div>span이 div를 품었다</div></span>
</body>
</html>

두번째줄을 보면 div는 span을 품어 내용길이만큼 span이 형성되었고 반대로 span이 div를 품은경우는 이변사항이없다. 오히려 div가 상위태그라 div의 background색이 먹힌것을 확인할수있다.

그럼 이렇게 나란히 배치하는경우 둘다 span을 쓰면 될까?

멈춰!!!! 그것은 안된다. 필자도 되는줄 알고했다가 고생했다

이미지 같은경우 크기를 조절해서 써야하는데 span의 경우 사이즈조절이 불가능했다.
왼쪽의 글귀같은경우 p태그가없을경우 span을 사용해도 될것같다.
필자는 다 div로 썼음