🎈 box-sizing
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성이다.
총 4가지 속성을 가지고 있다.
- content-box: content 영역을 기준으로 크기를 정함 (default)
- border-box: 테두리를 기준으로 크기를 정한다.
- initial: 기본값으로 설정
- inherit: 부모 요소의 속성값을 상속
🎈Content-box랑 border-box는 무슨차이?
box-sizing: content에 border나 padding을 추가하게 되면 요소의 너비나 높이에 추가가 되어 해당 box의 크기는 그만큼 더 커지게 된다.
예를 들어, 단순히 너비와 높이를 50px씩 줄 수 있지만 여기에 border나 padding을 주게 된다면 content-box는 50+더해준 값으로 계산을 하게 된다!
하지만 border-box는 다르다! 아래 문단을 확인해보자 :)
🎈 자주 사용하는건 border-box?
우리가 css를 초기설정 할때 body값에 margin, padding을 0을 주는 것과 동일하게 box-sizing을 border-box로 거의 준다고 한다. 이유가 무엇일까?
예를 들어 100px 너비에서 border나 padding을 추가하게 된다면 100px + (border or padding값)이 아니라 100px 안에 padding과 border값이 포함이 된다는 것이다. 그만큼 content box는 줄어들게 되는 것이고!
이런 성질 때문에 border-box가 요소의 사이즈를 맞추는 것이 더 용이하다고 한다.
🎈 Reference
뭐든 해보고싶은 개발자