[CSS] CSS box-sizing에 대하여 알아보도록 하자.

2021-04-21 box-sizing은 css 속성의 너비 및 높이 속성을 정의하는 역할을하게 되며, content-box / border-box 두가지 옵션을 가지고 있다. -예제 ​ 위에는 예제 코드이며 아래는 그 결과물이다. 두 div 차이는 box-sizing 옵션을 서로 상이하게 준 것 외에는 다른 css 속성은 모두 동일하다. 위의 결과를 보았을때 누가봐도 content-box속성을 부여한 빨간색 div가 조금 더 커보이는 것을 확인할 수 있다. 그이유는 무엇일까? 사실 이유는 간단하다. content-box는 정의한 초기 높이와 넓이 속성이 콘텐츠 영역에 해당하고 내부 여백과 테두리는 포함하지 않는다. 다시 말하면 전체 div 영역에 내부여백을 포함하지 않기 때문에 내부여백을 부여할 수록 ..