[CSS] box-sizing (css box sizing border-box)

오늘 다뤄볼 것은 box-sizing이다.

 

Box-sizing이란?

 

속성은

• content-box - 컨텐츠 상자의 기본값이다. border와 padding은 크기에 포함되지 않는다.
• border-box - 오늘의 포인트! 너비랑 높이에 padding, border 값 또한 포함이 된다.
• inherit - 부모 요소에서 속성을 상속함. 

이러하다.

 

king-kumgang.tistory.com/4

[CSS] css 박스모델 (margin, padding, border,content)

근데 이게, 나는 width가 400px 인 녀석을 만들려고 했는데 padding 하고 border 때문에

결국에는 넓이가 530px인 애가 만들어진 거지.

 

이건 바람직하지 않은 결과라고 ~~~~~~~~~~~~~~~~~~~~~

 

박스 모델의 모든 영역을 계산해서 전체가 400px인 걸 만들든가

아니면 내용물의 너비만 400px인 걸 만들든가 해야 하는 거 징.

 

혹시라도 나 외에 이 글을 보는 사람이 있다면 이 점을 주의해서 만드는 게 신상에 좋다.

 

내가 이전 포스팅에서 이런 말을 한 적이 있는데, 이것과 연관이 있다.

 

이전에 나는 박스 모델에서 Content뿐만 아니라 border, padding, margin도 상자 크기에 포함되어 있다고 생각한적이 있으나, 사실은 그렇지 않다.

 

이전의 내 생각처럼 코드를 썼다가는 생각치도 못 한 크기의 결과물이 나올 것이다.

 

 

어쨌든.

 

<div class="div1"> div1: 내일 점심은 삼겹살을 먹겠어요. <br> 나의 width는 300px </div>
<br>
<div class="div2">div2: 나는 오일 파스타 먹고싶어.<br> 나의 width는 300px </div>

    div {
        background-color: azure;    
    }
        
    .div1 {
      width: 300px;
      height: 100px;
      border: 1px solid #000000;
    }

    .div2 {
      width: 300px;
      height: 100px;
      border: 1px solid #0000FF;
    }

내일 점심 메뉴에 대해 대화하는 크기가 같은 div1과 div2가 있다.

코드 보면 알겠지만 보더의 색깔 빼고는 속성이 모두 다 같은 아이들.

 

 

그런데 !!!!

 

 

    .div1 {
      width: 300px;
      height: 100px;
      border: 1px solid #000000;
      
      /*추가*/
      padding: 30px;
    }

    .div2 {
      width: 300px;
      height: 100px;
      border: 1px solid #0000FF;
    }

div1 padding에 30px 추가하니 갑자기 이렇게 크기 차이가 심하게 나버린 것이다.

div2는 이대로 패배할 것인가..!

 

div2는 가만히만 있지 않았다. border 크기를 40px로 변경해 div1에게 대항하였따.

 

 

 

 

하지만 Box-sizing: border-box;가 출동하면 어떨까?

 

Box

          sizing 

border-box ;

                       !!!!!

 

 

div {
        background-color: azure;
        box-sizing: border-box;
    }
        
    .div1 {
      width: 300px;
      height: 100px;
      border: 1px solid #000000;
      padding: 30px;
    }

    .div2 {
      width: 300px;
      height: 100px;
      border: 40px solid #0000FF;
    }

암만 padding이 30px이고 100px이고 또 border 크기가 40px이라 해도 box-sizing(그 안에서도 border-box)하나로 이 둘은 다시 이전과 같이 같은 크기가 되었다.

 

그들은 이전처럼 다시 평화로울 것이다.

 

div1과 div2야~ 앞으로는 내 말 잘 듣고 서로 싸우지 말고 사이좋게 지내야한다~

 

그러니 아까 div1과 div2처럼 요소들끼리 박터지게 싸우는 꼴을 보고 싶지 않다면

* {
	box-sizing: border-box;
}

이렇게 모든 요소들에게 border-box를 주는 것도 방법이다.

 

 

 

속성 inherit의 경우에는

    body {
       box-sizing: border-box;
    }
        
    .div1 {
      width: 300px;
      height: 100px;
      border: 1px solid #000000;
      padding: 30px;
    }

    .div2 {
      width: 300px;
      height: 100px;
      border: 40px solid #0000FF;
    }
        
    .div3 {
      width: 300px;
      height: 100px;
      border: 20px solid #0000FF;
      /*  추가  */
      box-sizing: inherit;    
    }    

말 안 듣는 div1, div2와 달리 상위 요소인 body의 속성(box-sizing: border-box)을 그대로 따르고 있는 것을 볼 수 있다.

 

 

 

 

[참고]

www.w3schools.com/css/css3_box-sizing.asp

www.w3schools.com/cssref/css3_pr_box-sizing.asp