Box Model
Prologue
Front End 개발 처음 하다보면 이 Box Model 때문에 원하는대로 크기를 조절 못하는 경우가 많다. 나 역시 그랬다.
Element를 감싸고 있는 이 Box Model를 이해하면 제멋대로 동작하던 CSS를 이해하게 될것이다.
Concept
Element를 감싸고 있는 걸 Box Model 이라고 정의하고 Margin, Border, Padding, Content로 구성된다.
Box Model를 살펴 보자
실습
box-sizing를 이용해서 Box Model를 확인해보자
box-sizing 속성은 element가 어떻게 width, height 가 계산되는지 설정할수 있게 한다.
box-sizing의 기본값은 content-size 이다.
content-size
기본 값은 content-size 이므로 box1의 요소는 border, padding, margin이 추가되어도 content size는 100x100이 유지된다.
그렇기에 border, padding margin 값들이 추가되어 해당 요소가 더 커졌다.
border-size
box2는 border-size이므로 border 기준으로 100x100이 하므로, content 영역이 줄어든다.
Sample Code
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
background-color: lightgrey;
width: 100px;
height: 100px;
border: 10px solid green;
padding: 10px;
margin: 10px;
}
.box2 {
background-color: lightgrey;
width: 100px;
height: 100px;
border: 10px solid green;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}
.content {
background-color: blue;
width: 100%;
height: 100%;
color: white;
}
</style>
</head>
<body>
<div class='box1'>
<div class='content'>hello</div>
</div>
<div class='box2'>
<div class='content'>hello</div>
</div>
</body>
</html>
결과
