[ CSS ] box-sizing 속성

🤍 box-sizing

CSS 속성 box-sizing은 계산된 요소의 전체 너비와 높이를 정하는 것이다.

 

child container을 보시오

box-sizing: content-box;
width: 100%;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

CSS box model에서 너비와 높이는 요소의 콘텐츠 상자에만 적용된다.

요소에 border ( 테두리 ) 나 안쪽 여백 ( paddng )이 있으면 이것이 너비와 높이에 추가되어 화면에 박스 사이즈로 렌더링된다.

이것은 너비와 높이를 설정할 때, 어떤 border나 padding이 추가되도 허용되게끔 값을 조정해야 한다.

 

너비 25%인 4개의 박스들이 있고, 왼쪽 또는 오른쪽 여백이나 왼쪽 또는 오른쪽 테두리가 있다면 이 박스들은 부모 컨테이너의 제약 조건 내에서 한 줄에 맞지 않을 것이다.

---

✉ box-sizing 속성으로 할 수 있는 일

∎ content-box

• CSS 표준에서 지정한 초기 및 기본값이다.
• 기본 CSS 상자 크기 조정을 한다.
• 콘텐츠가 포함되지만 border, padding은 포함되지 않는다.

 

.box {width: 350px; border: 10px solid black;} 결과값은?

너비가 370px인 상자를 렌더링한다.

 

요소의 크기는 아래와 같이 계산된다.

너비 = 콘텐츠의 너비 및 높이 = 콘텐츠의 높이 ( border, padding 은 계산에 포함되지 않는다. )

 

 

요소의 너비를 100px로 설정한다면?

요소의 너비를 100px로 설정한다면?요소의 콘텐츠 상자의 너비가 100px이 되고, 테두리 or 안쪽 여백의 너비가 최종 렌더링 너비에 추가되어 결국 요소는 100px보다 넓어진다.

---

∎ border-box

• 요소의 너비와 높이에 대해 지정한 값의 테두리와 안쪽 여백을 고려하도록 브라우저에 지시한다.
• 너비와 높이에 콘텐츠, padding, border 이 포함되지만 margin은 포함되지 않는다.

 

350px; border: 10px solid black;} 결과값은?

너비가 350px이고 콘텐츠 영역의 너비가 330px인 상자를 렌더링한다.

border-box 콘텐츠 상자는 음수일 수 없으며 바닥이 0이므로 요소를 사라지게 할 수 없다.

 

요소의 크기는 아래와 같이 계산된다.

너비 = border + padding + 콘첸츠 너비 및 높이 = border + padding + 콘텐츠 높이

 

요소의 너비를 100px로 설정한다면?

이 100px 너비에는 어떤 테두리 or 안쪽 여백을 추가해도 100px 너비 안에 포함될 것이다

그리고 콘텐츠 상자는 추가 너비를 흡수하기 위해 축소된다.

이렇게 하면 요소의 크기를 쉽게 지정할 수 있다.

 

box-sizing, border-box는 브라우저가 사용하는 <table>, <select>, <button> 요소들 / radio, checkbox, reser, button, submit, color, search 요소들의 기본 스타일이다.

---

∎ content-box VS border-box

box-sizing으로 요소를 배치하려면 borer-box로 요소를 배치하는 것이 유용한 경우가 많다

 

왜?

• 요소의 사이즈를 더 쉽게 조절할 수 있다.
• 콘텐츠를 배치하는 동안 걸리는 여러 함정이 제거된다.

 

반면에

position : relative 를 사용하거나 position : absolute를 사용할 때 box-sizing : content-box를 사용하면 이 content-box는 콘텐츠에 연관된 포지션 값 ( positioning values )이 상대적이 되고, 테두리와 안쪽 여백 사이즈의 변경과 무관하게 된다.

이것은 종종 유용하다.

 

---

- CSS box-sizing 속성 

https://developer.mozilla.org/

box-sizing - CSS: Cascading Style Sheets | MDN