HTML과 CSS는 무척이나 자유로운 언어로, 오류나 구문에 문제가 있더라도 멈추는 일 없이 모든 것을 나름으로 해석해서 출력하기 때문에 쉽기도 하지만 오작동없이 완벽히 구현하기 위해서는 많은 경험을 필요로 한다.

오늘은 CSS3의 box-sizing Property에 대해 얘기해 보고자 한다.

Element 의 width 값은 기본적으로 padding과 border값을 포함하지 않고 있다. 그렇기 때문에 만약에 2개의 column으로 Element를 배치해야할 경우 width를 50%로 주게되는데, 이 때 border나 padding값을 주게되면 두 요소는 inline으로 배치되지 못하고 떨어져 버린다.

element {
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
}

box-sizing은 이 경우에 사용하는 Property로 위와 같이 입력해 주면 width값이 padding 과 border 값을 포함하게 된다. 그러나 box-sizing은 CSS3의 Property이기 때문에 여전히 크로스브라우징이 중시되는 우리나라 웹 상황에서는 사용에 문제가 많다.

그래서 왠만한 CSS3 Property 를 모두 지원하는 모바일 환경이 아니라면 아래와 같이 요소의 자식으로 inner 클래스를 가진 요소를 생성하고, inner에 border와 padding값을 입력하는 것이 안정적이고 보편적이다.

<div class="el">
    <div class="el-inner">
    </div>
</div>
<div class="el">
    <div class="el-inner">
    </div>
</div>
</pre>
<pre>.el {
  width: 50%;
  float: left;
}
.el-inner {
  border: 1px solid #ccc;
  padding: 10px;
}