단순화된 CSS 상자 모델

웹 페이지의 각 요소는 상자로 둘러싸여 있습니다. 이러한 상자의 배열은 웹 사이트의 레이아웃을 구성합니다. 빌딩 레이아웃은 프런트 엔드 개발의 중요한 부분이며 박스 모델을 이해하는 것이 필수불가결한 요소입니다.

상자의 특징:
각 상자에는 패딩, 여백 및 테두리가 있습니다.

패딩: 콘텐츠와 테두리 사이의 공간입니다.

여백: 테두리 주변의 공간입니다.

테두리: 상자의 크기를 나타냅니다.

https://commons.wikimedia.org/wiki/File:Box-model.svg

상자 크기:
상자의 크기는 다음과 같이 계산됩니다.

상자 너비 = 요소 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리

상자 높이 = 요소 높이 + 패딩 상단 + 패딩 하단 + 테두리 상단 + 테두리 하단

예를 들어 다음 CSS를 살펴보십시오.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
  margin: 10px;
}

상자 너비 = 요소 너비(100px) + 왼쪽 패딩(10px) + 오른쪽 패딩(10px) + 왼쪽 테두리(5px)+ 오른쪽 테두리(5px) = 130px

상자의 높이 = 요소의 높이(100px) + padding-top(10px) + padding-bottom(10px) + border-top(5px) + border-bottom(5px) = 130px

따라서 상자의 크기는 130px x 130px입니다.



우리는 요소를 100px x 100px로 의도했지만 패딩과 테두리가 너비와 높이 모두에 30px를 추가했습니다. 이로 인해 요소가 오버플로되고 공간을 놓고 서로 경쟁하여 레이아웃이 엉망이 될 수 있습니다.

박스 사이징:
이에 대한 해결책은 box-sizing이라는 CSS 속성입니다. box-sizing의 기본값은 content-box로 설정됩니다.

Content-box: 요소의 너비와 높이만 포함합니다. 패딩과 테두리는 포함되지 않습니다.

따라서 패딩과 테두리는 요소에 추가 픽셀을 추가하여 상자의 전체 크기를 늘립니다.

대체 옵션은 border-box입니다.

테두리 상자: 패딩과 테두리를 포함합니다. 패딩과 테두리가 변경되면 그에 따라 요소의 크기가 조정되어 상자의 크기가 고정됩니다.



이전 예제에 border-box를 적용해 보겠습니다.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
  margin: 10px;
  box-sizing: border-box;
}

패딩과 테두리를 추가한 후에도 상자의 크기는 100px x 100px로 유지됩니다. 이는 패딩과 테두리를 수용하기 위해 요소의 크기를 70px x 70px로 자동 조정하여 달성됩니다.

팁:
스타일시트 시작 부분에서 모든 요소의 기본 box-sizing 속성을 재설정하려면 범용 선택기(*)를 사용하여 box-sizing을 border-box로 설정합니다.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

이 기사가 상자 모델을 이해하는 데 도움이 되었다면 댓글로 알려주세요!