[CSS] 박스 모델(box model) 그리고 박스 사이징(box-sizing)

HTML을 구성하는 모든 요소들은 사각형의 형태로 되어있다. 마치 박스 모양같은 형태인데, 때문에 '박스 모델' 또는 '상자 모델'이라고 불린다. 웹 디자인에서도 박스 모델은 정말 중요하고도 기본적인 개념인데 이 박스 모델은 어떤 구조로 이루어져 있는지 알아보려고 한다.

 

 

 

 

 

 

목차

1. Box Model
2. box-sizing

 

 

Box Model

우리가 개발자 모드에서 자주 보는 이 이미지가 바로 박스 모델의 전부다. 박스 모델은 실제 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 이루어져 있다. 브라우저에서 렌더링을 할 때, 이 박스 모델의 크기, 위치, 속성을 인지하고 반영한다. 

 

요소	설명
콘텐트(Content Area)	이미지, 글, 영상 등의 실질적 요소들이 나타나는 영역
패딩(Padding Area)	콘텐츠 영역 주변에 여백을 줌(안쪽 여백). 패딩은 눈에 보이지 않는 영역이다.
테두리(Border Area)	콘텐츠와 패딩 영역 주변을 둘러싸는 테두리
마진(Margin Area)	테두리 바깥쪽에 여백을 줌(바깥 여백). 마진은 눈에 보이지 않는 영역이다.

 

 

※ 테두리를 경계로 안쪽 여백과 바깥 여백을 각각 패딩, 마진으로 정의할 수 있다.

 

See the Pen by cw (@fromnowwon) on CodePen.

 

 

HTML 전체 요소 너비

250px (Content width) + 20px (Padding left) + 20px (Padding right) + 10px (Border left) + 10px (border right) + 15px (margin left) + 15px (margin right) = 340px

 

 

 

 

box-sizing

CSS 박스 사이징은 박스 모델이 어떤 기준으로 너비와 높이를 계산할지 지정해주는 역할을 한다. 작업자의 성향에 따라 다르기 때문에 뭐가 정답이라고 할 수는 없다. CSS에서 너비와 높이를 지정하면, 앞서 알아보았던 박스 모델의 기본값으로 설정되고 Content 영역의 너비와 높이만 계산하기 때문에, 그 요소에 패딩이나 테두리가 있다면 생각했던 결과물이 나오지 않는 경우가 있다.

 

content-box

박스 모델의 기본값을 따른다. Content 영역의 너비를 300px로 지정하면 Content 영역의 너비가 300px이 된다. 패딩이나 테두리를 포함한 너비가 아니기 때문에 패딩과 테두리 값은 300px에 추가로 더해진다.

border-box

이 경우 Content 영역의 너비를 300px로 지정하면 Content 영역에 안쪽 여백(패딩)과 테두리 영역을 모두 합친 너비가 300px이 된다. 300px 내에서 패딩과 테두리 영역이 커지는 만큼 Content 영역이 줄어드는 것이다. 이 경우 너비 계산이 훨씬 쉬워진다. (IE8 이상에서만 사용 가능)

 

출력

See the Pen by cw (@fromnowwon) on CodePen.

 

content-box로 지정했을 경우 요소의 총 너비

250px (Content width) + 20px (Padding left) + 20px (Padding right) + 10px (Border left) + 10px (border right) = 310px

 

border-box로 지정했을 경우 요소의 총 너비

250px (Content Area + Padding left + Padding right + Border left + Border right)