- box-sizing : border-box 입니다.
- padding, border 수치를 감안하여 지정한 값으로 딱 사이즈를 맞춰줍니다.
- IE 의 경우 9버전 이상부터 지원됩니다. IE8 이하를 그냥 무시한다면 사용해도 좋겠습니다.
box-sizing
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
box-sizing 은 지정한 사이즈에 변화를 주는 요소 padding 이나 border 의 테두리 두께등을 감안하여
지정한 사이즈대로 정확히 맞춰줍니다.
예제 1
box-sizing 개요
보기
아래 박스들은 DIV로 모두 가로 500px, 세로 150px 로 지정 되어있습니다. 다른점을 하나씩 볼까요?
padding(안쪽여백)이 10px 있습니다.
실제 가로 520px, 세로 170px
padding 값의 영향으로 실제보다 큽니다.
실제 가로 520px, 세로 170px
padding 값의 영향으로 실제보다 큽니다.
위와 같지만 테두리가 5px 추가되었습니다.
실제 : 가로 530px, 세로 180px
테두리 두께의 영향으로 더 커지네요.
실제 : 가로 530px, 세로 180px
테두리 두께의 영향으로 더 커지네요.
box-sizing : border-box 적용
실제 : 500px, 세로 150px
안쪽여백 테두리등의 값을 포함해서 크기가 맞춰졌습니다.
실제 : 500px, 세로 150px
안쪽여백 테두리등의 값을 포함해서 크기가 맞춰졌습니다.
소스
<style type="text/css">
.css_test div {
background : #efefef;
height : 150px;
margin : 10px auto;
padding : 10px;
text-align : center;
width : 500px;
}
.css_test .box02 {
border : 5px solid silver;
}
.css_test .box03 {
border : 5px solid silver;
box-sizing : border-box;
}
</style>
아래 박스들은 DIV로 모두 가로 500px, 세로 150px 로 지정 되어있습니다. 다른점을 하나씩 볼까요?
<div class="css_test">
<div class="box01">padding(안쪽여백)이 10px 있습니다.<br>실제 <b>가로 520px, 세로 170px</b><br>padding 값의 영향으로 실제보다 큽니다.</div>
<div class="box02">위와 같지만 테두리가 5px 추가되었습니다.<br>실제 : <b>가로 530px, 세로 180px</b><br>테두리 두께의 영향으로 더 커지네요.</div>
<div class="box03">box-sizing : border-box 적용<br>실제 : <b>500px, 세로 150px</b><br>안쪽여백 테두리등의 값을 포함해서 크기가 맞춰졌습니다.</div>
</div>
.css_test div {
background : #efefef;
height : 150px;
margin : 10px auto;
padding : 10px;
text-align : center;
width : 500px;
}
.css_test .box02 {
border : 5px solid silver;
}
.css_test .box03 {
border : 5px solid silver;
box-sizing : border-box;
}
</style>
아래 박스들은 DIV로 모두 가로 500px, 세로 150px 로 지정 되어있습니다. 다른점을 하나씩 볼까요?
<div class="css_test">
<div class="box01">padding(안쪽여백)이 10px 있습니다.<br>실제 <b>가로 520px, 세로 170px</b><br>padding 값의 영향으로 실제보다 큽니다.</div>
<div class="box02">위와 같지만 테두리가 5px 추가되었습니다.<br>실제 : <b>가로 530px, 세로 180px</b><br>테두리 두께의 영향으로 더 커지네요.</div>
<div class="box03">box-sizing : border-box 적용<br>실제 : <b>500px, 세로 150px</b><br>안쪽여백 테두리등의 값을 포함해서 크기가 맞춰졌습니다.</div>
</div>
설명
예제 2
실습 - box-sizing : border-box 효과를 직접 느껴보자
보기
가로 400, 세로 100, 안쪽여백(padding) 0
box-sizing : border-box
box-sizing 이 지정되지 않은것
설명