CSS : 박스 모델 (Box Model)

<CSS 박스 모델이란?>

CSS의 박스 모델은 여백, 테두리, 패딩, 및 콘텐츠등 자체를 포함한 다양한 속성을 담고 있는 컨테이너입니다. 이러한 속성들은 함께 요소의 크기와 간격을 결정하여 페이지에서 볼 수 있는 박스를 생성하게 됩니다. 

 

<박스의 구성>

-  콘텐츠 (Content) : 콘텐츠가 표시되는 영역으로 그 크기를 width (넓이) & height (높이)와 같은 속성을 사용해서 정할 수 있습니다. 

- 패딩 (Padding) : 콘텐츠 주변을 마치 공백처럼 공간을 만들어줍니다. 패딩의 크기는 padding과 관련 속성을 사용해 제어할 수 있습니다. 

- 테두리 (Border) : 콘텐츠와 패딩까지 둘러싸고, 테두리의 크기, 색상, 테두리 넓이, 스타일등은 border와 관련 속성을 사용하여 제어할 수 있습니다. 

- 여백 (Margin) : 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 해당 박스와 다른 요소 사이 공백 역할을 합니다. 여백의 크기는 margin과 관련 속성을 사용하여 제어될 수 있습니다. 

 

<박스 모델 계산 법>

박스 모델에서 width 와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그 후 나머지 패딩과 테두리는 박스의 너비와 높이에 추가되어 박스가 점유하는 전체 크기가 정해줍니다. 

 

박스 모델이 차지하는 공간은 실제로 너비 410px (width 350px + padding 50px (좌우 합) + border 10px (좌우 합)) 그리고 높이는 610px (height 550px + padding 50px (top+bottom 합)+ border 10px (top+bottom 합))

 

<Box-Sizing>

- box-sizing: content-box: 기본값으로, 요소의 크기를 콘텐츠 영역을 기준으로 계산합니다. 즉, 패딩과 테두리는 크기에 포함되지 않습니다.
- box-sizing: border-box: 요소의 크기를 테두리까지 포함하여 계산합니다. 즉, 패딩과 테두리가 요소의 크기에 포함되지만, 바깥 여백(마진)은 포함되지 않습니다.

 

참조 :

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model

박스 모델 - Web 개발 학습하기 | MDN

https://www.geeksforgeeks.org/css-box-model/

CSS Box model - GeeksforGeeks