Box Model & box-sizing

Box Model

CSS 박스 모델은 HTML Element가 웹페이지에서 차지하는 공간을 정의한 모델 입니다.

 

Box Model 이미지

• Element의 내용이 담긴 Content 영역
• Element를 감싸는 경계 Border 영역
• Border와 Content 영역 사이의 Padding 영역
• Border 바깥의 Margin 영역

 

box-sizing

box-sizing 속성을 사용하면, width 와 height 이 컨텐츠 영역 기준인지, 테두리 영역 기준인지 정할 수 있습니다.

 

box-sizing 종류

• box-sizing: content-box
  • 기본값이며 컨텐츠 영역 기준. Padding 영역부터 포함하지 않습니다.
• box-sizing: border-box
  • 테두리 영역 기준. Margin 영역부터 포함하지 않습니다.

 

너비와 높이가 480인 정사각형을 만들 때

box-sizing: content-box 사용

• 정사각형을 만들기 위해 width와 height 둘 다 480px을 주었습니다.
• 사진을 보면 왼쪽 하단 아래 530x520 으로 만들어진 것을 볼 수 있습니다.
• 즉, 박스 전체가 아니라 content 박스 만의 width, height가 설정 되었습니다.
• 결론 : 우리가 원하는 480px의 정사각형을 만들기 위해서는 일일이 빼고 더하고 연산을 해야 합니다.

 

box-sizing: border-box 사용

• 더 이상 content 박스의 가로,세로가 아니라 border 박스가 기준이 됩니다.
• 즉, content와 padding, border까지 포함한 영역이 됩니다.

 

CSS 작업 시

* {
    box-sizing : border-box;
}

• 최상단에 먼저 선언을 하고 작업하면 평소 처럼 생각하는 테두리 기준으로 생각 할 수 있습니다.

 

참고

• 코드 안식처
• MDN, CSS 기본 박스 모델 입문
• CSS 박스 모델과 box-sizing 속성
• CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성