📦 css3 Boxsizing 정리

css3 Boxsizing 정리

안녕하세요 TriplexLab 입니다.

오늘은 css3 속성인 Box-sizing에 관해서 알아볼게요

css를 공부하다 보면 기본적으로 box model(박스모델)이라는 5가지 속성을
배우게 될텐데
(width, heigh, padding, border, margin)

5가지를 일리리 계산해서 width, heigh값을 조절해야 하는 벙거러움이 있었다.
선배 계발자분들은 css3가 나오기 전에는 width, heigh값을 일리리 계산해줬다는 말....

 

그래서 더이상 노가다 하지 말라고 W3C에서 Box-sizing이라는 것을 배포해줬네요.

먼저 코딩을 보기전에 호환성을 채크해볼까요??
거의 완벽하게 호환이 되는것을 확인할수 있어요.

<div class="div1">Hello World!</div>
<div class="div2">Hello World!</div>

 

.div1 {
  box-sizing: border-box;
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

.div2 {
  box-sizing: border-box;
  border: 10px solid red;
  width: 300px;
  height: 200px;
  padding: 40px;
}

다행히 CSS3부터는 box-sizing 속성을 사용하면 이 문제를 해결할 수 있습니다. 따로 설정해주지 않으면 box-sizing의 기본값은 content-box인데, 이걸 border-box로 바꿔주면 끝. 간단하죠??ㅋㅋ

더 간편하게!

box-sizing 속성을 사용하면 너무 편하다 보니, 요즘 많은 개발자들이 모든 요소에 box-sizing: border-box;를 써주는 추세입니다. 이걸 간편하게 한 번에 처리하기 위해서는 모든 요소를 나타내는 *에 속성을 써주면 되겠죠?

* {
  box-sizing: border-box;
}

.div1 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

.div2 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  padding: 40px;
}

*에 속성을 써주면 모든 요소들에게 속성값을 적용하겠다는 뜻이에요~~