CSS / 박스 모델(Box Model)
Box Model
HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면
<body> <header> <h1>Lorem</h1> </header> </body>
body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다.
박스의 구성
하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, 내용 영역으로 구성됩니다. 다음은 각 영역을 살펴보기 위한 간단한 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1 { margin: 30px; border: 30px solid #dddddd; padding: 30px; } </style> </head> <body> <h1>Box Model</h1> </body> </html>
웹브라우저로 보면 다음과 같이 나옵니다.
각 영역의 구분이 명확하지 않으므로 IE의 요소 검사로 보도록 하겠습니다.
색이 있는 모든 영역이 h1 요소입니다. 각 색이 나타내는 영역은 다음과 같습니다.
- ① : 바깥 여백 영역(Margin Area)
- ② : 테두리 영역(Border Area)
- ③ : 안쪽 여백 영역(Padding Area)
- ④ : 내용 영역(Content Area)
각 영역을 꾸밀 때 사용하는 속성은 다음과 같습니다.
- 바깥 여백 : margin 속성
- 테두리 : border 속성
- 안쪽 여백 : padding 속성
- 박스의 가로 크기 : width 속성
- 박스의 세로 크기 : height 속성
- 박스의 크기 기준 : box-sizing 속성
- 박스의 배경 : background 속성