box-sizing에 대해 알아봅시다.

1. box-sizing
 
예전부터 너비값에 대해서 애매한 부분들 때문에 사람들이 box-sizing이라고 하는 새로운 CSS 테그를 말들었습니다.

엘리먼트에 box-sizing을 설정하면 해당 엘리먼트의 패딩과 테두리가 이제는 너비를 늘리지 않았습니다.

예제는 두 엘리먼트에 모두 box-sizing: border-box;를 지정했습니다.

 

예제.

 

.ttm {
  width: 370px;
  margin: 17px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.ttm_ty {
  width: 400px;
  margin: 27px auto;
  padding: 35px;
  border: solid red 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="simple">

크기가 서로 똑같아 졌습니다.
</div>
<div class="fancy">
한번 해보세요.

</div>

이와 같은 방법이 훨씬 더 낫기 때문에 페이지 상의 모든 엘리먼트가 이렇게 동작하게 만들고 싶은 분들도 있습니다.

그런 분들은 페이지에 다음과 같은 CSS 코드를 집어넣습니다.

 

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

엘리먼트가 항상 이처럼 직관적인 방법으로 크기가 설정됩니다.

box-sizing은 다소 근래에 생긴 프로퍼티라서 지금 당장은 예제에서 한 것처럼 -webkit-이나 -moz- 접두사를 붙입니다.

이 기법은 특정 브라우저에서 실험적인 기능들을 활성화에 사용됩니다.

이 기법은 IE8+에서만 사용할 수 있다는 점도 기억하세요.