block Vs inline Vs inline-block을 알아보자

* block

spiderman과 king을 다시 모시고 와봤다
spiderman은 block, king은 inline-block 이다

보이는것처럼 block은 한 영역을 차지하는 박스형태다

* inline

king에게 inline을 설정해보았다 보이는것 처럼 width,height 를 설정해줬음에도 불구하고 Text 크기만큼 크기가 줄어든것을 볼 수 있다

여기서 볼 수 있는것처럼 inline 요소는 줄바꿈이 이뤄지며 height,width 설정이 불가능 하다. 따라서 텍스트를 삽입할때 사용되어진다.

* inline-blcok

king에게 inline-block요소를 부여해줬다. inline 처럼 줄바꿈이 이뤄졌지만 width, height 크기 설정이 가능한 것을 확인 할 수 있다.