box-sizing

1.포스팅개요

Helngers 프로젝트 진행하며 css 전체를 다시 복습 중이다.
지금까지의 프로젝트는 아직 능숙하지 않은 Vue 공부에 집중 했지만 목표가 있고 인력이 충분한 해당 프로젝트에서 Figma의 프로토 타입을 기반으로 디테일한 css를 다루고 있다.

그 중 이제야 알게된 지금까지의 css의 고통의 근원을 알게 되어 포스팅 한다.

2. 어려움

그동안 css를 하며 height, width, margin, padding으로 크기를 조절하는데 마음처럼 안되는 경우가 빈번 했다.

아니 height를 줬는데 왜 달라지지....

움직이는 짤 찾기는 ... (귀찮)

3. 해결

codepen에서 card 디자인을 찾는 중

body와 box-sizing이라는 태그를 확인하게 되었다.

그냥 그러려니 넘겼다가 시간이 남아 코드 리뷰를 하는 중

box-sizing을 찾아보게 되었고

https://dasima.xyz/css-box-sizing-content-box-vs-border-box/

정확한 의도를 알게되었다.

기본 설정은

box-sizing: content-box;

인데, 해당 크기는 content에 적용이 되는 사이즈이다.
그러므로 margin, border, padding 별개로 추가되어 사이즈가 의도보다 더 커지게 된다.

그러나 일반적으로 사람이 생각하는 box는 content에 border와 padding이 포함된 정도. border-box를 사용하면 margin, border, padding이 적용된 box를 가지게 된다.

box-sizing: border-box;

그런데 이것도 왜 margin 까지 포함했는지 모르겠지만 아무튼 더 직관적이기에 많이들 적용시키는 것 같다.

아무튼 margin이 추가되기 때문에 이 속성 적용은 오히려 box의 크기가 의도보다 조금 작아지게 된다.