📌 Language/CSS

[CSS] 박스 크기를 결정하는 box-sizing : border-box, content-box

dev_genie 2022. 12. 20. 23:06

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.

 

[ Box-sizing 속성 ]

 

1) border-box:

  - 테두리를 기준으로 크기를 정함

  - border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음

 

2) content-box:

  - 콘텐트 영역을 기준으로 크기를 정함

  - border, padding, margin을 모두 합산하여 콘텐트 영역이 설정값보다 작을 수 있음

 

 

[ 문제 인식 ]

<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        div {
            width: 200px;
            margin: 10px;
        }

        .small {
            border: 10px solid black;
        }

        .large {
            border: 30px solid black;
        }
    </style>
</head>
<body>
    <div class="small">box1</div>
    <div class="large">box2</div>
</body>

위 코드로 짜여진 블록요소들(box1, box2) 의 크기는 같을까? 

 

테두리를 제외한 알맹이(=콘텐트)만 본다면 같다 할 것이다.box1은 border: 10px을 줘서 약간 커진 데 반해, 

box2는 border: 30px을 준 탓에 원래 콘텐트가 가진 너비보다 커보인다.

 

사실상의 너비는 같으나, 콘텐트 영역에 추가적으로 더해준 보더값 등으로 인해 크기가 달라보이는 착시를 겪는 것이다.

 

만약 박스 테두리를 기준으로 크기를 맞춘다면?!

 

 

div {
    width: 200px;
    margin: 10px;
    box-sizing: border-box;
}

두 div 요소에 box-sizing: border-box 스타일을 줬다.

(각 박스에 준 border값이 차이나는 관계로, 두 요소의 크기를 맞추려면 border-box가 최선이다;)

 

border-box 스타일을 주자마자 쏙 하고 두 div 요소가 테두리를 기준으로 맞춰졌다.

 

<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
        * {
            box-sizing: border-box;
        }

        div {
            width: 200px;
            margin: 10px;
            box-sizing: border-box;
        }

        .small {
            border: 10px solid black;
        }

        .large {
            border: 30px solid black;
        }
    </style>
</head>
<body>
    <div class="small">box1</div>
    <div class="large">box2</div>
</body>

이러한 점들로 인해 많은 div 요소들이 삽입된 웹페이지를 코딩할 때

* {   box-sizing: border-box;  }

 

위 같은 별표(*: 모든 태그 지정)를 상단에 넣어서border 기준으로 모든 박스들의 사이즈가 정해지도록 설정해두면 작업하기에 한결 편해질 것 같다.

 

 

 

LIST