CSS 박스모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킵니다. 이 박스 모델들이 모여 웹 문서를 이루죠. 또한 그 안에는 마진과 패딩, 테두리 등 여러 겹의 박스가 들어 있습니다. 이 개념은 CSS에서 자주 사용 되므로 잘 기억해 두어야 합니다.
Box Model
HTML 요소는 박스(box)로 이루어져 있습니다.
예를 들어 다음과 같이 코드를 작성했다면
<body>
<header>
<h1>Lorem</h1>
</header>
</body>
body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다.
박스의 구성
하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, 내용 영역으로 구성됩니다. 다음은 각 영역을 살펴보기 위한 간단한 예제입니다.
박스 모델은 실제 콘텐츠 영역(content area), 박스와 콘텐츠 영역사이의 여백인 패딩 영역(padding area), 박스의 테두리 영역(border area), 그리고 여러 박스 모델 사이의 여백인 마진 영역(margin area) 등의 요소로 구성됩니다.
색이 있는 모든 영역이 박스(box)의 요소입니다. 각 색이 나타내는 영역은 다음과 같습니다.
- 바깥 여백 영역(Margin Area)
- 테두리 영역(Border Area)
- 안쪽 여백 영역(Padding Area)
- 내용 영역(Content Area)
각 영역을 꾸밀 때 사용하는 속성은 다음과 같습니다.
- 바깥 여백 : margin
- 테두리 : border
- 안쪽 여백 : padding
- 박스의 가로 크기 : width
- 박스의 세로 크기 : height
- 박스의 크기 기준 : box-sizing
- 박스의 배경 : background