[HTML&CSS] 박스모델 (Box Model)

| 박스모델 (box model)

CSS에서는 각 요소를 박스 형태로 나타내며 이를 박스모델(Box Model)이라 합니다. 문서의 레이아웃을 계산할 때, 브라우저는 CSS 기본 박스 모델에 따라 각 요소를 사각형 박스로 표현합니다. 

하나의 박스는 아래와 같이 네 부분으로 이루어집니다.

마진(Margin) : 바깥 여백을 나타냅니다.

테두리(Border): 마진과 패딩 사이의 테두리 영역을 나타냅니다.

패딩(Padding): 안쪽 여백 영역을 나타냅니다.

콘텐츠(Content): 실제 텍스트나, 이미지가 들어가는 영역입니다.

| 박스모델(box model) 확인하는 방법 

박스모델은 각 브라우저에서 개발자도구창에서 쉽게 확인할 수 있습니다. 크롬을 기준으로 F12를 누르면 개발자 도구창이 나오며 Elements => Styles 탭에서 각 요소의 박스모델을 확인할 수 있습니다. 혹은 브라우저에서 나타난 요소를 우클릭 => 검사를 클릭하면 바로 해당 요소의 박스모델을 보실 수 있습니다.

참고 자료

https://hackernoon.com/the-box-model-44fc2c04a935