📌 참고 사이트
box-sizing - CSS: Cascading Style Sheets | MDN (mozilla.org)
box-sizing - CSS: Cascading Style Sheets | MDN
box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.
developer.mozilla.org
📋 box-sizing 속성
요소의 너비와 높이를 계산하는 방법을 지정한다.
📍 content-box
➡️ 기본값으로, 지정한 너비와 높이는 요소의 content box 크기에만 적용된다. 즉, 요소에 테두리나 안쪽 여백이 있으면 기존 너비와 높이에 확장하여 화면에 그린다.
즉, 요소의 크기는 너비 == content 너비, 높이 == content 높이 라고 볼 수 있다.
ex 1)
<!DOCTYPE html>
<html>
<body>
<div
style="
width: 200px;
height: 200px;
border: 10px solid yellowgreen;
margin: 50px;
"
>
parent container
<!-- content-box가 기본값이므로 이 예시에서는 box-sizing 속성을 꼭 적어주지 않아도 된다.-->
<div style="box-sizing: content-box; width: 100%; background-color: gray">
child contianer
</div>
</div>
</body>
</html>
child container의 width가 100%로 설정되어 있으므로 child container의 content 너비는 부모인 parent container의 너비인 200px를 그대로 따라간다.
padding이나 border같은 속성이 child container에 적용되어 있지 않기 때문에 child container는 확장되지 않고 parent container의 content 너비에 딱 맞게 존재하는 모습을 볼 수 있다.
ex 2)
<!DOCTYPE html>
<html>
<body>
<div
style="
width: 200px;
height: 200px;
border: 10px solid yellowgreen;
margin: 50px;
"
>
parent container
<!-- content-box가 기본값이므로 이 예시에서는 box-sizing 속성을 꼭 적어주지 않아도 된다.-->
<div style="box-sizing: content-box; width: 100%; padding: 5px; border: 10px solid salmon">
child contianer
</div>
</div>
</body>
</html>
child container의 width가 100%로 설정되어 있으므로 부모인 parent container의 content 너비인 200px를 그대로 따라가 child container의 content 영역의 너비는 200px가 된다.
child container에는 padding이 상하좌우로 5px씩 적용되어 있고, border도 상하좌우로 10px씩 적용되어 있다. 이것들은 child container의 content 영역에서 추가되어 붙게 된다. 따라서 child container가 parent container 영역보다 너비를 더 차지하는 것처럼 나타난다.
📍 border-box
➡️ box-sizing을 border-box로 설정하면 width와 height 속성이 padding(안쪽 여백)과 border(테두리)는 포함하고, margin(바깥 여백)은 포함하지 않는다.
즉, 요소의 크기는 너비 == 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 == 테두리 + 안쪽 여백 + 콘텐츠 높이 라고 볼 수 있다.
ex)
<!DOCTYPE html>
<html>
<body>
<div
style="
width: 200px;
height: 200px;
border: 10px solid yellowgreen;
margin: 50px;
"
>
parent container
<div
style="
box-sizing: border-box;
width: 100%;
padding: 5px;
border: 10px solid salmon;
"
>
child contianer
</div>
</div>
</body>
</html>
box-sizing 속성을 제외하고 content-box에서의 ex2) 에서와 같은 스타일을 적용해 주었다.
child container의 padding, border 부분까지 parent container의 content 부분에 딱 맞게 들어가 있는 것을 볼 수 있다.
여기에서도 child container의 너비를 width: 100%로 설정했으므로 부모인 parent container의 content 너비인 200px를 따라가게 된다. 그런데 border-box로 설정하게 되면 child container의 content 너비 + padding 너비 + border 너비 이렇게 모두 합쳐서 200px가 되어야 하므로 결국 child container의 content 너비가 줄어들게 되고 결과적으로 parent container의 content 너비에 딱 들어맞게 된다.
'HTML & CSS' 카테고리의 다른 글
| [CSS] display (block, inline, inline-block, none) (0) | 2023.08.09 |
|---|---|
| [CSS] float와 clear (0) | 2023.08.08 |
| [CSS] Box Model (0) | 2023.08.07 |
| CSS 기초 (0) | 2023.01.17 |
| HTML 기본 (0) | 2023.01.17 |
댓글