Web/CSS
[CSS] box-sizing
kkkkk1023
2023. 5. 8. 19:27
1. box-sizing이란
width와 height는 기본적으로 콘텐츠 영역을 기준으로 설정이된다. 즉, 마진, 패딩, 테두리가 얼마인지와 상관없이 width와 height는 콘텐츠 영역에만 적용이 된다.
box-sizing 적용 전 사진을 보면 콘텐츠 영역을 기준으로 width가 적용되어 small과 large의 width가 다르게 보인다. (콘텐츠 영역의 width만 적용되었기 때문이다.)
이 문제를 해결하기 위해서는 box-sizing을 사용해야한다. box-sizing: border-box를 설정한다면 테두리가 기준이 되어 width를 적용받게 된다. 따라서 아래의 사진을 보면 small과 large의 width가 같게 보인다.
/* 적용 전 */
<style>
div{
margin:10px;
width: 150px;
}
#small{
border: 10px solid black;
}
#large{
border: 30px solid black;
}
</style>
</head>
<body>
<div id="small">hello</div>
<div id="large">hello</div>
</body>
/* 적용 후 */
<style>
div{
margin:10px;
width: 150px;
box-sizing: border-box;
}
#small{
border: 10px solid black;
}
#large{
border: 30px solid black;
}
</style>
</head>
<body>
<div id="small">hello</div>
<div id="large">hello</div>
</body>
