태초에 박스가 있었다 ...

모든 HTML 요소들은 브라우저에서 렌더링 될 때 CSS 박스 모델에 따라 네모난 박스로 표현됩니다.

위의 이미지는 에어비엔비(https://www.airbnb.co.kr/) 서비스의 검색 UI 일부분을 개발자 화면으로 본 모습입니다. 여러 요소들이 네모난 모양으로 선택된 모습이 보이시나요? 이렇듯 사용자들이 보는 UI는 수 많은 네모 박스들의 집합입니다 🙂

우린 사실 수많은 박스들이라구! 후훗..

1. 박스의 구성

HTML 요소들은 모두 안에 박스들을 가지고 있습니다.

총 4가지의 박스로 이루어져 있는데요, 이를 박스 모델이라고합니다.

• 콘텐츠(content) 박스: 요소의 콘텐츠가 표시되는 영역으로 넓이는 [width](<https://developer.mozilla.org/ko/docs/Web/CSS/width>) 그리고 높이는 [height](<https://developer.mozilla.org/ko/docs/Web/CSS/height>)와 같은 속성을 사용해서 설정할 수 있습니다.
• 패딩(padding) 박스: 패딩은 콘텐츠와 테두리 사이의 공간입니다. 패딩의 크기는 [padding](<https://developer.mozilla.org/ko/docs/Web/CSS/padding>)과 관련 속성을 사용해 제어할 수 있습니다.
• 보더(border) 박스: 보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리입니다. 보더의 크기와 스타일은 [border](<https://developer.mozilla.org/ko/docs/Web/CSS/border>)와 관련 속성을 사용하여 제어할 수 있습니다.
• 마진(margin) 박스: 마진은 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할을 합니다. 마진 박스의 크기는 [margin](<https://developer.mozilla.org/ko/docs/Web/CSS/margin>)과 관련 속성을 사용하여 제어될 수 있습니다.