문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.
CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.
하나의 박스는 네 부분(영역)으로 이루어진다.
이렇게 HTML 요소 박스는 다양한 속성에 의해 결정되며, 이를 ‘CSS 박스 모델(Box Model)’이라고 한다.
참조: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
콘텐츠 영역을 표시하는 CSS문법 중 box-sizing이라고 하는 속성이 있는데, 이는 요소의 너비와 높이를 계산하는 방법을 지정한다.
같은 크기라 할지라도 box-sizing의 속성값에 따라서 box의 너비와 높이가 달라진다.
HTML 요소에 대한 너비와 높이는 각각 width, height 속성를 사용한다.
요소의 최소 및 최대 너비와 높이를 지정하는 속성이며, width 및 height 속성과 사용 값이 동일하다.
박스의 크기, 위치, 속성을 결정할 때 사용하는 CSS 문법에 대해 자세히 알 수 있었고, box-sizing 속성을 사용할 때 너비, 높이 계산을 편하게 하려면 border-box를 쓰는 것이 좋을 것 같았다.
박스 모델에 연관된 속성에는 display, visibility, overflow도 있긴 하나 이번 글에서는 크기와 관련된 속성만 알아보았다.