[CSS] box model에 대해서

박스 모델(box model)

모든 CSS는 박스로 둘러쌓여져있다. 이 박스를 이해하는것이 CSS를 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬 가능하게 하는 열쇠이다.

블록(Block) 및 인라인 박스(inline-boxes)

CSS에는 크게 블록 박스와 인라인 박스 유형 두가지로 나눌 수 있다.
이러한 특성은 박스가 페이지안에서 다른박스와 관련하여 어떻게 작동하는지를 나타낸다.

display속성을 이용하여 다양한 값으로 설정할 수 있다.

외부 디스플레이 유형(Outer display type)

박스가 블록으로 정의되면 다음과 같은 방식으로 동작한다.

• 박스는 새 줄로 행갈이를 한다.
• width와 height속성은 존중된다.
• 패딩과 마진, 테두리로 인해 다른 요소들이 박스로부터 밀려난다.
• 만약 너비(width)가 구체적이지 않으면, 박스는 인라인 방향으로 연장되어 상위 컨테이너에서 사용 가능한 공간을 채우게 된다.
  대부분의 경우 박스가 사용가능한 공간을 100%로 채우면서 상위 컨테이너 너비만큼 된다는 의미이다.

<h1> 및 <p>와 같은 일부 HTML 요소는 기본적으로 블록을 외부 디스플레이 유형으로 사용한다.

linine 외부 디스플레이 유형(inline outer display type)

만약 박스가 inline 외부 디스플레이 유형일 경우,

• 박스는 새 줄로 행갈이를 하지 않는다.
• width와 height 속성은 적용되지 않는다.
• 위 아래 패딩, 마진, 테두리가 적용되지만 다른 인라인 박스가 박스에서 멀어지지는 않는다.
• 좌우 패딩, 마진, 테두리가 적용되며 다른 인라인 박스가 박스에서 멀어지게된다.

<a>, <span>, <em>, <strong> 과 같은 일부 HTML 요소는 기본적으로 inline 외부 디스플레이 유형으로 사용한다.

내부 디스플레이 유형(inner display type)

또한 박스에는 박스 내부의 요소를 배치하는 방법을 결정하는 내부 디스플레이 유형도 있다.

블록 및 인라인 레이아웃은 웹에서 기본적으로 동작하는 방식이다.
기본적으로 다른 지시 없이 박스 내부의 요소도 일반 흐름으로 배치되어 블록 또는 인라인 박스처럼 동작한다.

예를 들어 display: flex; 를 설정하여 내부 디스플레이 유형을 변경할 수 있다.
이 요소는 여전히 외부 디스플레이 유형 블록을 사용하지만 내부 드시플레이 유형을 flex로 변경한다.
이 박스의 자식들은 flex항목이 되어 flex 박스 사양에 따라 동작한다.

CSS 레이아웃에 대해 더 자세히 알게 되면 flex 및 박스가 가질수 있는 다양한 속성값(ex. grid)을 접할 수 있다.

박스 모델(box model)소개

문서를 레이아웃 할때 브라우저의 렌더링 엔진은 표준 표준 CSS 박스 모델에 따라 각 요소를 직사각형 모양의 박스로 나타낸다.
CSS는 이러한 박스의 크기, 위치 및 속성(색상, 배경, 테두리 크기 등)을 결정한다.

모든 박스는 컨텐츠 가장자리(content edge), 패딩 가장자리(padding edge), 테두리 가장자리(border edge), 여백 가장자리(margin edge)로 정의되는 네 영역으로 구성된다.

사진 출처 : MDN-CSS box model

이미지와 함께 보면 이해하기가 훨씬 더 쉬워진다.

그렇다면 각 영역에 대해서 한번 살펴보도록 하자

컨텐츠 영역

컨텐츠 가장자리로 둘러싸인 컨텐츠 영역에는 텍스트, 이미지 또는 비디오 플레이어와 같은 요소의 "실제" 컨텐츠가 포함된다.
해당 크기는 컨텐츠 너비(또는 컨텐츠 상자 너비)와 컨텐츠 높이(또는 컨텐츠 상자 높이)이다.
배경색이나 배경이미지가 있는 경우가 많다.

기본적으로 box-sizing으로 설정되고 content-box요소가 블록 요소인 경우, width, min-width, max-width, height, min-height, max-height속성을 사용하여 컨텐츠 영역의 크기를 명시적으로 정의할 수 있다.

패딩 영역

패딩 가장자리로 둘러싸인 패딩 영역은 요소의 패딩을 포함하도록 컨텐츠 영역을 확장한다.
해당 크기는 padding-box-width와 padding-box-height 이다.

패딩의 두께는 padding-top, padding-right, padding-bottom, padding-left 및 단축 padding속성에 의해 결정된다.

테두리 영역

테두리 가장자리로 둘러싸인 테두리 영역은 요소의 테두리를 포함하도록 패딩 영역을 확장한다.
해당 크기는 border-box-width와 border-box-height이다.

테두리의 두께는 border-width 및 단축 border 속성에 의해 결정된다.
box-sizing속성이 border-box로 설저된 경우 테두리 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성으로 명시적으로 정의할 수 있다.
box에 background(background-color 혹은 background-image)가 설정되어 있으면 테두리의 외부 border로 확장된다.
즉, z-ordering 순서로 테두리 아래로 확장된다.

이 기본 동작은 background-clip CSS 속성을 사용하여 변경할 수 있다.

여백 영역

여백 가장자리로 둘러싸인 여백 영역은 요소를 이웃 요소와 분리하는데 사용되는 빈 영역을 포함하도록 테두리 영역을 확장한다.
해당 크기는 margin-box-width와 margin-box-height이다.

여백 영역 크기는 margin-top, margin-right, margin-bottom, margin-left 및 단축 margin속성에 의해 결정된다.

여백이 발생할때, 여백과 box 사이에 공유되므로 여백 영역이 명확하게 정의되지 않는다.

마지막으로, 대체되지않은 인라인 요소의 경우 테두리와 패딩이 콘텐츠 주위에 계속 표시되더라도 차지하는 공간의 양(줄 높이에 대한 기여도)은 속성에 의해 결정된다.

참고자료 : MDN-Box Model,