참고원문 (1)

box-sizing

box-sizing 속성은 CSS의 테두리 영역 크기를 결정한다.

• content-box
  - 지정한 CSS width 및 height를 컨텐츠 영역에만 적용한다.
  - border, padding, margin 은 따로 계산되어 전체 영역이 설정값보다 커질 수 있다.

• border-box
  - 지정한 CSS width 및 height를 전체 영역에 적용한다.

  • border, padding, margin 을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 작아질 수 있다.

Box Model

CSS의 각 태그 영역은 Box Model로 구성된다.

• content : 글씨가 삽입되는 영역
• border : 테두리 영역
• padding : content와 border 사이
• margin : border와 다른 태그 영역 사이

content-box

• 전체 크기 = content-box + border + padding + margin
• 컨텐츠 크기 = content-box

border-box

• 전체 크기 = border-box = content + border + padding + margin
• 컨텐츠 크기 = border-box - border - padding - margin

💥 원하는 속성에 맞게 css 상단에 아래와 같이 작성해주면 사용이 편하다 ❗❗

* { box-sizing: border-box; }