박스 크기 조정

거의 모든 HTML 요소는 <a> 태그에서 <textarea> 태그에 이르는 상자로 특성화할 수 있으며 이러한 모든 요소에는 5개의 수정 가능한 차원이 있습니다.

폭

높이

패딩

테두리

여백

Box-Sizing 속성은 원하는 결과를 제공하기 위해 이러한 치수를 계산하고 수정하는 방법을 지정하기 위해 도입되었습니다.
이 Box-Sizing 속성에는 두 가지 값이 있습니다.

콘텐츠 상자

테두리 상자

값을 설정하지 않은 경우 Box-Sizing 속성의 기본값은 content-box입니다.

콘텐츠 상자

CSS3 이전에 content-box는 W3C Box Model로 알려져 있었습니다. Box-Sizing의 값을 content-box로 설정하면 해당 요소의 너비, 높이, 패딩 및 테두리를 더한 것이 요소의 전체 크기가 됩니다.
즉
요소에 너비와 높이를 지정한 후 해당 요소의 패딩과 테두리가 이후에 적용됩니다.

Element Width = Left padding + Right padding + Left border + Right border + Width

Element Height = Top padding + Bottom padding + Top border + Bottom border + Height

예시:

.box1{
   width: 500px,
   height: 300px,
   border: 10px solid red,
   padding: 30px,
   box-sizing: content-box
}

위의 예에서 요소의 너비는 더 이상 500이 아니라 580이고 높이는 더 이상 300이 아니라 380입니다.



📌 위의 다이어그램은 요소의 너비와 높이의 증가를 보여줍니다.

테두리 상자

이 상자 모델에서는 완전히 다른 계산이 수행됩니다.
요소의 너비와 높이를 지정하면 패딩과 테두리가 요소의 전체 너비와 높이에 기계적으로 포함됩니다.
즉 테두리와 패딩은 요소 크기를 늘리는 추가 기능이 아니라 너비와 높이의 일부로 간주됩니다.

Element Width = Width specified

Element Height = Height specified

예시:

.box2{
   width: 500px,
   height: 300px,
   border: 10px solid red,
   padding: 30px,
   box-sizing: border-box
}

위의 예에서 요소의 너비는 여전히 500으로 유지되고 높이는 여전히 300으로 유지됩니다. 패딩과 테두리는 너비와 높이의 일부로 간주됩니다.



📌 위의 다이어그램은 요소의 크기를 늘리지 않고 테두리와 패딩이 요소의 너비와 높이의 일부가 되는 방법을 보여줍니다.

그게 다야❕❕

이 기사의 토론에 대한 피드백, 의견 또는 의견이 있으면 의견 섹션에 알려주십시오. 나는 항상 토론을 기쁘게 생각합니다.

감사합니다 다음에 또 만나요 ​​🤝🤝.

.