Thuesday_June_23
.
.
.

상황극 시작 🧐

같은 크기(넓이)의 박스 2개를 만드려고 한다.
div 태그를 2개 만들고, 하나는 a, 나머지 하나는 b라고 클래스를 짓고 CSS를 적용해주겠다.

.a {
  width: 500px;
}

.b {
  width: 500px;
  padding: 50px;
  border: 10px solid black;
}

앞서 말했듯 같은 크기를 주기 위해 둘 다 width를 500씩 줬다.

그런데?!?!?

이렇게 만들면 크기가 다르다... Why?¿?¿ 🤯

박스 모델은 안쪽부터 차례대로
Content > Padding > Border > Margin 로 이루어져 있는데,
기본적으로 width(넓이)는 Content영역을 의미한다.

그래서 둘다 500이라는 크기를 줬지만, b클래스를 가진 박스는
padding의 양 옆 50 + 50 = 100 과 border의 양 옆 10 + 10 = 20
총 120만큼 더해져서 a클래스의 박스보다 커진 것이다.
.
.
.
아니 그럼 border와 padding을 다 계산해서 빼주라는건가??

해서 만든 새로운 Property!!!

Box-sizing 🤩

오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 요놈을 만들었다.

사용법

.a {
  box-sizing: border-box;
  width: 500px;
}

.b {
  box-sizing: border-box;
  width: 500px;
  padding: 50px;
  border: 10px solid black;
}

이렇게 해도 되고

* {
  box-sizing: border-box;
}

이렇게 처음부터 잡아줘도 된다.

그래서 요놈이 하는 일이 뭐냐!

Box-sizing이라는 값을 안주면 기본값으로 content-box로써
기준이 content이고,
우리는 border를 기준으로 해줬으니 border까지의 넓이가 500으로 되는것이다.

아까 padding이랑 border의 합이 120이라고 했는데,
그러면 500 - 120 = 380 이므로 content부분이 380만큼의 길이를 갖는다.