CSS Box Model에서 찾을 수 있는 가장 간단한 심층 분석

상자를 생각하면 무엇이 떠오릅니까?
다양한 목적으로 사용되는 직사각형 면이 있는 평평하고 평행한 물체?
아니면 간단히 말해서 변이 같은 직사각형 모양입니까?

그러나 상자를 인식하는 것은 다양한 방법으로 설명될 수 있으며, 오늘 우리는 그러한 방법 중 하나를 탐구할 것입니다. 박스 모델.



출처: GCF GLOBAL

CSS 박스 모델

"박스 모델"이라는 용어는 디자인과 레이아웃을 언급할 때 사용됩니다.
요소의 모양이나 크기에 관계없이 웹페이지나 웹사이트의 모든 HTML 요소를 감싸는 상자라고 생각하면 됩니다.

박스 모델은 다음으로 구성됩니다.

여백: 테두리 밖의 영역

테두리: 콘텐츠 및 패딩을 둘러쌉니다

.

패딩: 콘텐츠 주변 영역

실제 콘텐츠: 텍스트와 이미지가 나타나는 위치

상자 크기

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 정의합니다. box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 정의할 뿐만 아니라 요소의 전체 너비와 높이에 패딩과 테두리를 포함할 수도 있습니다.

box-sizing 속성은 속성을 정의하는 속성 없이는 존재하지 않습니다.
브라우저가 요소의 총 크기를 계산하는 방법을 제어하기 위한 유틸리티로 생각하십시오.
이러한 유틸리티는 다음으로 구성됩니다.

테두리 상자

콘텐츠 상자

테두리 상자:

출처: The Garage

이것은 높이나 너비가 주어질 때 요소의 테두리와 패딩을 포함하도록 브라우저에 지시합니다.
너비 및 높이 속성에는 콘텐츠, 패딩 및 테두리가 포함되지만 여백은 포함되지 않습니다. 패딩과 테두리는 상자 안에 있습니다. 예를 들어 .box {width: 350px; border: 10px solid black;}는 너비가 350px이고 콘텐츠 영역의 너비가 330px인 상자를 렌더링합니다.

* {
  box-sizing: border-box;
}

여기에서 요소의 치수는 다음과 같이 계산됩니다. 너비 = 콘텐츠의 너비, 높이 = 콘텐츠의 높이. (테두리와 패딩은 계산에 포함되지 않습니다.)

콘텐츠 상자:

출처: The Garage

이것은 요소의 지정된 너비와 높이 위에 테두리와 패딩을 추가하도록 브라우저에 지시합니다.
이것은 CSS 표준에서 지정한 초기 및 기본값입니다. 너비 및 높이 속성에는 콘텐츠가 포함되지만 안쪽 여백, 테두리 또는 여백은 포함되지 않습니다. 예를 들어 .box {width: 350px; border: 10px solid black;}는 너비가 370픽셀인 상자를 렌더링합니다.

* {
  box-sizing: content-box;
}

여기서 요소의 크기는 다음과 같이 계산됩니다. 너비 = 테두리 + 패딩 + 콘텐츠 너비, 높이 = 테두리 + 패딩 + 콘텐츠 높이.