CSS 박스모델

 

 

 

 

 

HTML/CSS 태그들은 각자의 영역을 가지게 되고 각자의 영역들이 박스(공간)을 가지게 된다. 

박스는 항상 직사각형이고, 너비와 높이를 가지게 되는데 CSS를 통해 그 크기를 설정할 수 있다. 

 

그중 필수적으로 이해해야할 개념이 하나 있는데, 바로 block / inline / inline-block 개념이다. 

 

 

 

 

 

줄바꿈이 되는 박스 : block

 

대표적 태그: <h1> <p>

 

줄바꿈이 되는 박스란 태그를 사용했을 때 다음 태그가 저절로 줄바꿈이 되는 태그를 뜻한다. 즉 <h1>태그를 사용하면 줄 전체 공간을 차지하며 이외의 태그가 배치되지 못한다. 

 

 

 

 

 

 

옆으로 붙는 박스 : inline

대표적 태그: <span>

 

옆으로 붙는 박스란 콘텐츠의 내용만큼 공간을 차지하기 때문에 줄 전체 공간을 차지 하지 않는다. 남는 공간에는 다른 태그들이 공간을 차지할 수 있다. inline 박스의 경우 width, height 속성이 적용되지 않으니 주의하자.

 

 

 

 

 

 

 

block과 inline의 중간성격 박스 : inline-block 

 

inline-block 박스는 옆으로 붙는 박스이지만 공간의 크기를 따로 설정할 수 있다. 

 

예시)

span { background: yellow; display: inline-block; width: 100px; height: 100px; }

 

 

 

 

 

 

 

 

요약하자면 아래와 같다.

 

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능여부	가능	가능	불가능