[CSS] box-sizing

09-1. box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.

• content-box : 콘텐트 영역을 기준으로 크기를 정한다.
• border-box : 테두리를 기준으로 크기를 정한다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

.first {
width: 300px;
margin-bottom: 20px;
}

.second {
width: 300px;
margin-bottom: 50px;
padding: 50px;
border-width: 10px;
}

padding, width를 배우고 나서 반드시 알고 있어야 할 특성입니다.

first 프로퍼티는 가로가 300px이 맞는데,

second 프로퍼티는 가로가 300px가 아닙니다.

이유는 양쪽으로 테두리 10px이 추가되었고, padding이 50px 씩 추가 되어서 가로가 420px이 되었습니다.

(10+10+50+50+300 = 420)

• 이런 특성을 파악하고 코딩하면 딱히 문제가 없겠지만, 귀찮은 일이 생깁니다.
• 디자인 시안에서는 박스의 가로값만을 알 수 있는데, 디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됩니다.
• 눈으로 보이는 그 너비가 개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아지지 않을까요?
• 수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었습니다.

이와 같이 second 프로퍼티 또한 가로 300px 처럼 보이기 위해 width 값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽습니다.

그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다.

.new {
  box-sizing: border-box;
}

또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.

그래서 이럴 때는 아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.

* {
  box-sizing: border-box;
}

출처 : wecode