WEB/HTML & CSS
[CSS] box-sizing : 박스 크기 방식 설정
강잇
2022. 6. 28. 13:33
box-sizing
box-sizing이란
박스 모델의 너비와 높이를 계산하는 방식을 변경하는 속성
box-sizing 사용 이유
- width와 height는 기본적으로 컨텐츠 박스 크기에만 적용된다.
- 따라서 테두리(border) 또는 안쪽 여백(padding)이 있는 경우에는 컨텐츠의 크기 + @로 테두리나 안쪽 여백을 고려해야 하기 때문에 어려움을 느낀다.
- 여기서 box-sizing의 value를 border-box로 지정하면 width와 height를 테두리, 여백을 포함한 크기로 지정할 수 있다.
box-sizing values / box-sizing 속성 값
content-box
CSS 표준의 정의한 초기 기본값으로 width와 height 속성이 컨텐츠 영역만 포함한다.
selector {
box-sizing: content-box;
}border-box
width와 height 속성이 border와 padding의 크기를 포함하고, 바깥 여백(margin)은 포함하지 않는다.
selector {
box-sizing: border-box;
}content-box와 border-box 차이
- 동일한 너비와 높이 값으로 box-sizing만 차이를 두어 생성했을 때 결과는 다음과 같다.
- 결과에서도 알 수 있듯이 둘의 차이점은 내가 설정한 크기를 content만의 기준으로 할 것인가 border~content까지 포함하여 기준으로 둘 것인가이다.
(과연 어느 쪽이 고려해야 할 점이 많을까 생각해보면 답은 정해져 있는 것 같다..)
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content-box">content-box</div>
<br>
<div class="border-box">border-box</div>
</body>
</html>
참고
https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
box-sizing - CSS: Cascading Style Sheets | MDN
box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.
developer.mozilla.org