박스 모델에 대한 이해와 다른 박스 모델을 구현하는 방법을 설명하십시오.

CSS 상자 모델은 HTML 문서의 요소를 화면에 렌더링하기 위해 브라우저에서 사용하는 패턴입니다.

레이아웃 및 개별 요소는 브라우저의 렌더링 엔진에 의해 직사각형 상자로 표시됩니다. Box Model은 Visual Formatting Model의 box generation 단계에서 사용됩니다. 콘텐츠, 패딩, 테두리 및 여백과 같은 요소의 다른 부분이 함께 작동하여 화면에 그려지는 상자를 만드는 방법을 정의합니다.

상자 모델에 따르면 상자는 네 부분으로 구성됩니다.

네 면의 콘텐츠 가장자리로 정의된 콘텐츠 영역입니다.

콘텐츠 영역을 둘러싸고 패딩 가장자리로 정의되는 패딩 영역입니다.

패딩 영역을 둘러싸고 테두리 가장자리로 정의되는 테두리 영역입니다.

인접한 요소 사이의 공간을 정의하는 여백 영역이 있습니다.

이러한 각 영역에는 width , height , padding , margin 및 border 와 같은 해당 속성 식별자로 설정할 수 있는 너비와 높이가 있습니다. 에서와 같이:

div {
  width: 20rem;
  height: 12rem;
  padding: 1rem;
  margin: 2rem;
}

Box Model을 이해하면 정확하고 일관되며 예측 가능한 동작으로 레이아웃을 만드는 데 도움이 됩니다. Box Model은 Standard CSS Basic Box Model과 Alternate Box Model의 두 가지 형식으로 구현됩니다. 이러한 형식은 요소의 box-sizing 속성에 의해 설정됩니다.

표준 CSS 기본 상자 모델
표준 CSS 기본 상자 모델은 요소에서 사용하는 기본 모델입니다. box-sizing: content-box에 의해 구현됩니다.

이 모델에서 height , width , max-height , min-height , max-width 및 min-width 에 의해 요소에 설정된 높이 및 너비는 콘텐츠 가장자리 내에서만 적용됩니다. 여백이나 테두리를 추가하면 상자의 실제 크기가 더 커집니다.

다음과 같은 스타일의 경우:

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

패딩과 테두리는 아래와 같이 실제 렌더링된 상자를 더 크게 만듭니다.



대체 상자 모델
대체 상자 모델은 box-sizing: border-box 로 구현되며 테두리 가장자리까지 확장할 요소의 너비와 높이를 설정합니다. 따라서 추가된 여백과 테두리는 요소의 너비와 높이 내에 포함됩니다. 따라서 콘텐츠 영역은 패딩 및 테두리 값에 의해 축소됩니다.

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

다음과 같이 표시됩니다.




참조

Introduction to the CSS basic box model

The Box Model

Visual Formatting Model - Box Generation