box-sizing

오랜 시간에 걸쳐 사람들은 너비값을 조절하는 해법이 그다지 만족스럽지 않다는 사실을 깨닫고 box-sizing이라고 하는 새로운 CSS 프로퍼티를 만들어냈습니다. 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않습니다. 다음은 이전 페이지와 동일한 예제이지만 두 엘리먼트에 모두 box-sizing: border-box;를 지정했습니다. 

.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;
}
<div class="simple">

이제 크기가 같아졌어요!

</div>
<div class="fancy">

야호!

</div>

이 방법이 훨씬 더 낫기 때문에 페이지 상의 모든 엘리먼트가 항상 이런 식으로 동작하게 만들고 싶은 분들도 있습니다. 그런 분들은 페이지에 다음과 같은 CSS 코드를 집어넣습니다. 

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

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

box-sizing은 다소 근래에 생긴 프로퍼티라서 지금 당장은 예제에서 한 것처럼 -webkit-이나 -moz- 접두사를 붙여야 합니다. 이 기법은 특정 브라우저에서 실험적인 기능들을 활성화하는 데 사용됩니다. 아울러 이 기법은 IE8+에서만 사용할 수 있다는 점도 염두에 두세요.

  • Creative Commons License