CSS box-sizing 사용법

 

 

box-sizing

---

box-sizing

 

 

엘리먼트의 너비를 설정할 경우 해당 엘리먼트는 실제로 설정한 것보다 크게 나타날 수 있다.

 

엘리먼트의 테두리와 패딩이 지정된 너비 이상으로 엘리먼트를 늘리기 때문이다.

 

엘리먼트에box-sizibng을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않는다.

 

예제

<style>
.simple {
    width: 500px;
    margin: 20px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.fancy {
    width: 500px;
    margin: 20px auto;
    padding: 50px;
    border: solid blue 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
</style>

 

페이지에 항상 같은 사이즈로 적용하고 싶다면 아래와 같은 CSS 코드를 사용한다.

 

<style>
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;        
}
</style>

 

이렇게 하면 모든 엘리먼트가 항상 더 직관적인 방식으로 크기가 지정된다.

box-sizing은 다소 근래에 생긴 프로퍼티라서 예제와 같이-webkit-나-moz-접두사를 붙여야 한다.

이 방법은 특정 브라우저에서 실험적인 기능들을 활성화 하는데 사용된다.

 

이 방법은IE8+에서만 사용할 수 있다는 점도 염두해야한다.