내용 정리
- box-sizing은 CSS에서 요소의 너비와 높이를 계산하는 방법을 지정하는 속성입니다. content-box의 경우 별도의 너비와 높이 값 외에 테두리나 안쪽 여백을 포함하는데, 말 그대로 컨텐츠의 영역에만 너비와 높이가 적용된다고 볼 수 있습니다. border-box는 반대로 안쪽 여백과 테두리를 포함해서 너비와 높이를 적용합니다. 일반적으로 CSS reset을 통해서 border-box를 선호하는 이유는 계산이 용이하고 레이아웃을 예측 가능하게 적용하기 위해서라고 볼 수 있습니다. 최근에 많이 사용되는 tailwind 같은 경우에도 preflight를 통해 border-box로 세팅해두고 있습니다.
꼬리 질문
- box-sizing의 initial value는 무엇인가요? 그리고 border-box를 사용하기 위해 어떤 적용을 했는지 말씀해주세요
참고자료
평소엔 책과 영화와 음악을 좋아합니다. 보편적이고 보통사람들을 위한 서비스 개발을 꿈꾸고 있습니다.