어떤 element의 width, height를 사용하여 크기를 지정 할 때 해당 element에 padding, border와 같은 속성을
가지고 있을 경우 내가 지정한 사이즈가 예상과 다르게 적용되는 경우가 생깁니다.
어떤 element의 크기를 예측하기 쉽게 해주는 box-sizing을 알아 보겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
margin: 10px;
width: 150px;
}
#small {
border: 10px solid tomato;
}
#large {
border: 30px solid tomato;
}
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
margin: 10px;
width: 150px;
box-sizing: border-box;
}
#small {
border: 10px solid tomato;
}
#large {
border: 30px solid tomato;
}
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>
[ 결론 ]
box-sizing : border-box는 "box(태그)의 크기를 border에 맞춰서 지정한다"
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 마진 겹침 2 (0) | 2022.01.30 |
|---|---|
| [생활코딩] 마진 겹침 1 (0) | 2022.01.30 |
| [생활코딩] box model (0) | 2022.01.29 |
| [생활코딩] inline block (0) | 2022.01.29 |
| [생활코딩] 캐스케이딩(Cascading) (0) | 2022.01.28 |
댓글