Box Model

box는 요소가 차지하는 공간을 결정합니다.

개념 정의

  • 전체 CSS 박스 모델은 블록 상자(block box)에 적용되며, 인라인 상자(inline box)는 box model에 정의 된 일부 동작만 사용한다

  • 모델은 상자의 여러부분(padding, margin, border)이 함께 작동하여 페이지에서 볼 수 있는 상자를 만드는 방법을 정의한다.

block box

  • 콘텐츠 상자(Content box): 콘텐츠가 표시되는 영역으로 width 및 height 등의 속성을 사용하여 크기를 조정할 수 있다.

  • 패딩 상자(Padding box): 패딩은 콘텐츠 주위에 공백으로 배치됩니다. 크기는 padding 및 관련 속성을 사용하여 제어할 수 있다.

  • 테두리 상자(Border box): 테두리 상자는 내용과 패딩을 감쌉니다. 크기와 스타일은 border 및 관련 속성을 사용하여 제어할 수 있다.

  • 여백 상자(Margin box): 여백은 가장 바깥 쪽 레이어로 콘텐츠, 패딩 및 테두리를 이 상자와 다른 요소 사이의 공백으로 감싸줍니다. 크기는 margin 및 관련 속성을 사용하여 제어할 수 있다.

표준 CSS Box Model

  • 표준 상자 모델에서는 width와 height 속성으로 content box의 width와 height가 결정된다.

  • 그런 다음 모든 padding과 border가 해당 width와 height에 추가되어 상자가 차지하는 총 크기를 얻습니다.

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

  • 위와 같은 예제가 있다면, 표준 박스 모델을 사용하는 박스가 차지하는 공간은 실제로 410px(350+25+25+5+5), 높이는 210px(150+25+25+5+5)이다.

  • margin은 상자의 실제 크기에 포함되지 않는다.

대체 CSS Box Model

  • 상자(box)의 실제 크기를 얻기 위해 border와 padding을 더해야하는 것이 다소 불편하다고 생각할 수 있다.

  • 이러한 이유로 CSS에는 표준 박스 모델 이후 얼마동안 대체 박스 모델이 도입되었다.

  • 이 모델을 사용하면 모든 width는 페이지에 표시되는 상자의 width이므로 콘텐츠 영역 너비는 너비에서 padding 및 border 너비를 뺀 너비이다. 위에서 사용한 것과 동일한 CSS는 아래 결과를 제공한다(너비 = 350px, 높이 = 150px).

  • 기본적으로 브라우저는 표준 상자 모델을 사용한다. 요소에 대한 대체 박스 모델을 켜려면, box-sizing: border-box를 추가해 준다. 이렇게하면 설정한 크기로 정의된 영역으로 border-box로 사용하도록 브라우저에 지시한다.

.box {
  box-sizing: border-box;
}

  • 모든 요소가 대체 상자 모델을 사용하기를 원하고 이것이 개발자들 사이에서 일반적인 선택이라면 요소에 box-sizing 속성 <html>을 설정한 다음 아래 스니펫에 표시된대로 해당 값을 상속하도록 다른 모든 요소를 설정한다.

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
PreviousNormal FlowNextsvg

Last updated