CSS 박스 모델

CSS 기본 박스 모델

 - 문서의 레이아웃을 께산할 때, 브라우저의 표준 CSS 기본 박스 모델에 따라 각각으ㅟ 요소를 사각형 박스로

 표현한다. 

 - CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.

 - 하나의 박스는 네 부분(영역)으로 이뤄진다.

 - 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 바깥 여백(마진) 영역이라고 부른다.

박스 모델

컨텐츠 영역(Content area)	- 글이나 이미지, 비디오 등 요소의 실제 내용을 포함한다. - 컨텐츠 영역의 크기는 컨텐츠 너비(컨텐츠 박스 너비)와 컨텐츠 높이(컨텐츠 박스  높이)이다.  - 배경색과 배경 이미지를 가지고 있기도 하다. - box-sizsing 속성의 값이 기본값인 content-box이며, 요소가 블록 레벨 요소인 경우, 컨텐츠 영역의 크기를 width, min-width, max-width, heigth, min-height, max-height   속성을 사용해 명시적으로 설정할 수 있다.
안쪽 여백 영역(padding area)	- 컨텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장한다. - 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이이다. - 안쪽 여백의 두께는 padding-(top, right, bottom, left)와  단축 속성인 padding이  결정한다.
테두리 영역(border area)	- 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장한다.  - 영역의 크기는 테두리 박스 너비와 테두리 박스 높이다. - 테두리 두께는 border-width와 단축 속성인 border가 결정한다. - box-sizing 속성의 값이 border-box라면 테두리 영역의 크기를 width, min-width,  max-width, heigth, min-heigth, max-heigth 속성을 사용해 명시적으로 설정할 수  있다. - 박스의 배경(background-color 또는 background-image)은 테두리의 바깥 경계까지   늘어나고, 그릴 땐 테두리에 가려진다. 이 동작 방식은 background-clip 속성으로  바꿀 수 있다.
바깥 여백 영역(margin area)	- 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만든다. - 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이이다. - 바깥 여백 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left와  단축 속성인 margin이 결정한다. - 여백 상쇄가 발생할 때는 요소간에 바깥 여백이 공유되므로 여백 영역이 명확하게  결정되지 않는다.

 

- 출처/참고 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model