[CSS] Box model (박스 모델)

왜 Box model(박스 모델)인가?

브라우저의 렌더링 엔진이 문서의 레이아웃을 계산할 때 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다고 해서 붙여진 이름이다. (CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.)

박스는 어떻게 구성되어 있는가?

박스는 크게 Content area(내용물 부분), Padding(안쪽 여백), Border(테두리), Margin(바깥 여백)으로 이루어져 있다. 각 요소를 예시와 함께 살펴보자.

1. Content area

   이미지나 비디오 등 요소의 실제 내용 부분을 나타낸다.

   콘텐츠 영역의 크기는 width, height가 있다.

2. Padding (안쪽 여백)

   컨텐츠 영역 주위의 빈 공간의 크기를 나타낸다.

   padding-top, padding-right, padding-bottom, padding-left 등의 요소를 이용하여 값을 결정한다.

3. Border(테두리 영역)

   말 그대로 테두리의 영역을 말한다. border속성을 이용하여 변경할 수 있다.

4. Margin

   테두리 요소를 확장하여 인근 요소 사이의 빈 공간까지 포함하도록 만든다.

   margin-top, margin-right, margin-bottom, margin-left 요소를 설정할 수 있다.

   아래 예시는 padding: 2rem;을 준 상태이다.

아래 그림들은 모두 'CSS'라고 쓰여진 요소에 관해서만 위에 배운 개념들을 적용한 것이다. (아래 리스트 부분은 적용x)

(왼쪽) Content area: 아무 설정값을 주지 않았을 때의 상태 / (오른쪽) padding: 2rem;을 준 상태

(왼쪽) border: solid; border-width: 2rem;을 준 상태. 검정 부분이 border 부분 / (오른쪽) margin: 2rem;을 준 상태

 

References

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://docs.microsoft.com/ko-kr/windows/uwp/design/layout/alignment-margin-padding