박스모델(box model)이란 HTML 태그 엘레멘트는 모두 마진(margin), 테두리(border), 패팅(padding)를 가지고 있다고 보는 관점입니다. 박스모델은 컨텐츠의 영역을 나타내기 때문에 플로팅(float), 포지션닝(position)과 함께 레이아웃을 잡기 위해 필수적으로 알아야 하는 특성입니다.
모든 엘레멘트는 콘텐츠(텍스트나 이미지)를 감싸고 패팅, 테두리, 마진을 가지고 있다. 콘텐츠와 테두리 사이에 있는 영역이 패팅이고, 테두리 밖에 있는 영역이 마진입니다. 박스 모델은 엘레멘트의 가로, 세로를 설정해 페이지를 디자인하거나 레이아웃을 잡기 위해 사용됩니다. 즉, 각 엘레멘트 영역에 영향을 미치는 마진, 보더, 패딩을 가리켜 박스 모델이라고 한다. 아래 그림과 같이 엘레멘트는 각각의 영역을 가지고 있습니다.
[사진 출처] http://www.w3schools.com/css/css_boxmodel.asp
따라서, 콘텐츠 영역의 높이가 10px, 패딩이 10px, 테두리가 10px, 마진이 10px이라면 엘레멘트의 전체 높이는 10 + (10*2) + (10*2) + (10*2)가 되는 것입니다.
각 영역별 특징
- 마진 : 테두리를 감싸는 영역으로 배경색에 영향을 받지 않는다.
- 테두리 : 패딩과 콘텐츠를 감싸는 영역으로 배경색에 영향을 받지 않는다.
- 패딩 : 콘텐츠를 감싸는 영역으로 배경색에 영향을 받으며 콘텐츠의 여백을 나타낸다.
- 콘텐츠 : 텍스트나 이미지를 표시하는 영역
영역의 너비나 높이를 계산하는 방법
표준안에 따르면 width 값이나 heigth 값은 콘텐츠 영역의 값이며 실제적으로 패딩, 보더 값을 합쳐 전체 영역의 너비나 높이가 된다. IE8과 불여우는 이 표준을 따르며, IE6버전이 이 표준안과 다른 방식으로 적용된다. 실제 width 값은 다음과 같이 정의된다.
하지만, IE6에서는 width 값에 패딩값과 보더값을 포함하여 계산된다. 따라서 IE6 버전이 표준안을 준수하지 않기 때문에 브라우저간 호환성을 위해 문서 선언 부분을 다음과 같이 선언한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
위와 같은 문서 선언(DOCTYPE)을 한다면 HTML 문서는 표준안에 따라 올바르게 작동된다.
'HTML& CSS > CSS' 카테고리의 다른 글
| 박스모델 - 아웃라인(outline) 속성 (0) | 2009.10.16 |
|---|---|
| 박스모델 - 테두리(border) 스타일 지정 (0) | 2009.10.16 |
| 수평 정렬(Horizontal align) 방법 (0) | 2009.10.16 |
| 블럭 레벨 엘레멘트의 수직 정렬 (0) | 2009.10.16 |
| 인라인 블럭 레벨 엘레멘트의 특징 (0) | 2009.10.16 |