【CSS】박스(BOX) 크기 설정의 고민을 해결해 주는 box-sizing: border-box;
박스 크기를 결정할 때 너비와 높이 지정을 약간만 잘못돼도 박스의 너비는 균등하지 않고, 컬럼이 무너져 버리는 등 전체 레이아웃의 균형이 무너져 버립니다.
이럴 때 요소의 너비와 높이를 균일하게 유지해주는 편리한 속성이 box-sizing : border-box;입니다.
일반적으로 웹 사이트를 방문한 사용자에게 보기 편하고 좋은 디자인의 레이아웃을 만들기 위해서는, 디자인 문제는 제처두고라고 먼저 너비와 높이의 균형있는 레이아웃이 기본 조건이 됩니다.
따라서 콘텐츠 내용의 너비(width)과 높이(height), 패딩(padding), 보더(border)를 지정해야 합니다.
일반적으로 박스의 너비(width)와 높이(height)는 내용 영역의 너비와 패딩(padding), 그리고 보더(border)를 모두 더한 것이 실제로 눈에 보이는 표시된 너비(width)와 높이(height)가 됩니다.
그러나 각각의 폭과 높이를 지정하면서, 계산 실수로 예상치 못한 박스의 밸런스가 붕괴되기도 하여 고민이 되기도 합니다.
이럴 때 활약하는 것이 box-sizing 속성입니다. 이것을 사용하면 유연한 대응이 가능한 박스 크기를 지정할 수 있습니다.
스폰서 링크
| box-sizing：속성 값； | |
|---|---|
| content-box | 폭(width)과 높이(height)의 범위는 내용 영역에 한정됩니다. 패딩(padding)과 보더(border)는 그 폭과 높이에 포함되지 않고, 다른 폭과 높이가 됩니다. content-box는 초기 값으로, 요소의 크기는 width, padding, border로 계산됩니다. |
| border-box | 내용 영역의 폭(width)와 높이(height)는 패딩(Padding)과 보더(Border)를 포함한 범위가 됩니다. |
| inherit | 부모 요소의 값을 물려 받습니다. |
▼ 아래 그림과 같이, content-box의 전체 폭은, 컨텐츠 내용의 폭과 패딩, 보더의 폭을 모두 더한 합계입니다.
▼ 한편, border-box의 경우 전체 요소의 크기가 width 값입니다. 이에 따라서 요소의 padding과 border의 폭이 요소의 width를 늘릴 수는 없습니다.
아래의 예제에서는, 동일한 CSS 조건을 box-sizing 속성의 "content-box;"과 "border-box;"값에 각각 적용해 보았습니다.
content-box와 border-box의 차이
CSS
</style>
.box-sizing {
width:500px;
height:150px;
background-color:#999;
border: 15px solid #333;
padding:15px;
box-sizing: content-box;
}
</style>
스폰서 링크
▼ "content-box;"의 경우, 콘텐츠 내용의 가로 폭을 100%로 지정하면, 패딩과 보더의 두께와 합치면 실제로 표시되는 폭은 100%를 초과할 가능성이 높아집니다.
▼ 한편, "border-box;"의 경우, 동일한 조건에서도 전체 폭(width)이 패딩과 보더의 두께를 포함하고 있기 때문에 이에 영향을 받지 않고 능숙하게 사용하면, 반응형 웹 사이트를 만들 수 있을 것입니다.
border-box를 사용하여 구획배치하기
또한 컬럼 작성시 박스에 "box-sizing : border-box;"을 지정함으로써, 컬럼의 붕괴 등을 걱정하지 않고 설정할 수 있습니다.
아래와 같이, 가로 폭을 합계 100%로 지정하여 두 박스를 만들 경우, 왼쪽과 오른쪽 2 개의 박스를 각각의 콘텐츠 내용의 표시 영역을 왼쪽은 60%, 오른쪽은 40%로 지정하면, 패딩의 폭 지정과 관계없이 또한 박스가 100%를 초과하여 삐져나오지 않으며, 정확히 100%에 크기를 맞출 수 있습니다.
CSS
<style>
#leftboxs {
float: left;
width:60%;
padding: 15px;
background-color:#999;
border: 20px solid #fc0082;
box-sizing: border-box;
}
#rightboxs {
float: left;
width:40%;
padding: 15px;
border: 20px solid #fc0082;
background-color:#333;
box-sizing: border-box;
}
</style>
HTML
<body> <div id="leftboxs"> LEFT</div> <div id="rightboxs"> RIGHT</div> </body>
결과, 왼쪽과 오른쪽 박스에 각각 다른 패딩과 보더 값을 지정해도 폭의 함계가 100%를 유지하고 있는 것을 알 수 있습니다.
스폰서 링크