[CSS] 편리한 표준코딩을 위한 box-sizing 속성

좀 뜬금 없지만 그때 그때 생각나는 팁이 있으면 올리기로 했다.

웹디자인을 업으로 한지는 오래되지 않았지만

box-sizing 속성을 알기 전까진 레이아웃을 만질 때마다 늘 픽셀과의 전쟁이었다.

HTML 스타일을 다룰때 초심자라면 경험해 봤을 법한 일이다.

사이트 가로는 1000px인데 1px 테두리를 넣기 위해 개체폭을 998px로 지정하고 보더를 좌우 1px씩 넣는 처절함...

박스 안에 글씨를 넣었는데 여백때문에 padding을 10px 넣었더니 박스가 20px 늘어나서 박스를 20px 줄인 기억...

 

이는 이미 부트스트랩 등의 CSS 프레임워크에서 사용하는 선진기법이라 할 수 있다.

html 상단, 혹은 CSS 파일 상단에 이처럼 선언해버리면 박스개체들의 width값만 정해서 심플하게 레이아웃을 짜맞출 수 있다.

* {box-sizing:border-box} 혹은

body {box-sizing:border-box} 혹은

필요한 개체에만 .example {box-sizing:border-box}

브라우저별로 다르게 보인다면 이렇게 보정한다.

-webkit-box-sizing: border-box; (크롬)

-moz-box-sizing: border-box; (파폭)

box-sizing: border-box; (필자는 그냥 이거만 쓴다)

박스에 padding으로 좌우 여백을 20px 넣고 개체를 40px 줄여도 된다.

테두리를 1px 넣고 개체를 2px 줄여도 된다!

하지만 개체크기가 반응형이라던지 %로 사이즈를 정한다던지 하면 코드가 매우 복잡해진다.

답은 간단하다.

스마아아아트 하게

BOX-SIZING:BORDER-BOX!!!