반응형
box-sizing : border - box 는 뭘까 ?
class 이름이 box 인 요소가 있을때
이 요소의 가로 길이는
(width 600) + (padding (20+20)) +( border (10+10)) 해서 총 600+40+20 = 660 이 된다
근데 여기에
box-sizing : border - box ; 이런 구문을 추가하게 된다면
처음에 줬던 width 600에 맞춰서
padding 과 , border값은 그대로인 상태에서 총 가로의 길이가 600 이된다
결론 : padding + border + width = 600 이 되는셈이다
// 그래서 이걸 어떻게 써야 할까 ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.container{
width: 500px;
height: 200px;
background-color: yellow;
float: left ;
}
.box{
width: 100px;
height : 100px;
border: 1px solid black;
background-color: white;
float: left ;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>여기에 container 안에
가로길이는 500이고 div 박스 하나당 가로길이가 100+2 = 102이인 박스가 5개가 있다
box 에다가 float : left 속성을 걸어서 옆으로 나열 하려고 했는데
가로길이가 초과되기 때문에 마지막 box 는 밑으로 내려왔다
이럴때 가로길이 100을 맞추기위해서
box-sizing : border - box 를 사용하면 ?
이렇게 잘 들어간걸 확인 할수있다
box-sizing : border - box 이렇게 되면
box의 width 는 98px 이되고
border의 width 는 그대로 2가 되어서
총 가로길이는 100으로 맞춰진다 !
총 길이 width 길이에 맞게 조정이 되는것이다
반응형
댓글