CSS Box Sizing
CSS box-sizing: 요소의 크기 계산 방식 제어
- *CSS
box-sizing*은 요소의 너비와 높이를 계산하는 방식을 제어하는 속성입니다. 이 속성을 사용하면 패딩과 테두리가 요소의 크기에 포함되는지 여부를 결정할 수 있습니다. 이를 통해 정확한 레이아웃을 유지하고, 특히 반응형 웹 디자인에서 요소 크기를 효율적으로 관리할 수 있습니다.
1. box-sizing의 기본 개념
기본적으로 요소의 **너비(width)**와 **높이(height)**는 **콘텐츠(content)**의 크기를 기준으로 계산됩니다. 여기에 패딩(padding)과
테두리(border)가 추가되면, 요소의 실제 크기가 변경됩니다. box-sizing 속성을
사용하면, 이런 계산 방식에 영향을 주어 원하는 방식으로 요소 크기를 제어할 수 있습니다.
주요 값
content-box: 기본값. 콘텐츠 크기만width와height에 포함됩니다. 패딩과 테두리는 콘텐츠 크기에 추가됩니다.border-box: 패딩과 테두리가 **width와height*에 포함됩니다. 따라서 콘텐츠 크기가 줄어듭니다.
2. box-sizing: content-box (기본값)
- *
content-box*는 기본값으로, 요소의 **width*와 **height*는 콘텐츠 크기만을 포함합니다. 여기에 패딩과 테두리가 추가되어 실제 요소 크기가 커집니다.
예시: content-box 사용
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid #3498db;
box-sizing: content-box;
}
이 코드에서:
- *
width와height*는 콘텐츠 영역만 200px × 200px입니다. - 여기에 20px 패딩과 5px 테두리가 추가되므로, 실제 요소 크기는 250px × 250px이 됩니다.
설명
- 콘텐츠 크기: 200px × 200px
- 실제 크기: (200px + 20px × 2 패딩 + 5px × 2 테두리) = 250px × 250px
3. box-sizing: border-box
- *
border-box*를 사용하면 패딩과 테두리가 요소의 전체 크기에 포함됩니다. 즉, 지정한width와height내에서 패딩과 테두리가 계산되므로, 콘텐츠 영역이 줄어듭니다.
예시: border-box 사용
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid #3498db;
box-sizing: border-box;
}
이 코드에서:
- *
width와height*는 패딩과 테두리를 포함한 전체 크기를 의미합니다. - 실제 요소 크기는 200px × 200px로 유지되며, 콘텐츠 영역이 줄어듭니다.
설명
- 실제 크기: 200px × 200px
- 콘텐츠 크기: 200px - (20px × 2 패딩 + 5px × 2 테두리) = 150px × 150px
4. box-sizing과 반응형 디자인
- *
border-box*는 반응형 디자인에서 많이 사용됩니다. 이 설정을 사용하면 패딩이나 테두리를 추가해도 지정한 크기가 유지되므로, 레이아웃이 예상대로 작동하게 됩니다.
전체 문서에 border-box 적용
반응형 레이아웃에서는 모든 요소에 **border-box**를 적용하여 일관된 크기 계산을 유지할 수 있습니다. 이를 위해
전역적으로 설정할 수 있습니다.
*,
*::before,
*::after {
box-sizing: border-box;
}
이 코드는 모든 요소와 요소의 **가상 요소(::before, ::after)**에 대해 **box-sizing: border-box**를
적용하여, 레이아웃의 일관성을 유지합니다.
5. 실전 예시: 두 가지 방식의 차이
다음 예시는 **content-box**와 **border-box**의 차이를 시각적으로 보여줍니다.
예시: content-box와 border-box 비교
<div class="box content-box">Content Box</div>
<div class="box border-box">Border Box</div>
.box {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid #3498db;
margin-bottom: 20px;
line-height: 200px;
text-align: center;
color: white;
}
.content-box {
box-sizing: content-box;
background-color: #e74c3c;
}
.border-box {
box-sizing: border-box;
background-color: #2ecc71;
}
content-box: 빨간색 배경 요소는 200px의 콘텐츠 크기를 가집니다. 패딩과 테두리가 추가되어 실제 크기는 커집니다.border-box: 초록색 배경 요소는 전체 크기가 200px로 유지되며, 콘텐츠 크기는 패딩과 테두리 때문에 줄어듭니다.
6. 실전 예시: 반응형 그리드 레이아웃
border-box를 사용하여 반응형 그리드 레이아웃을 만들 수 있습니다. 패딩이나 테두리를 추가해도 각 그리드 요소의 크기를 유지할 수 있습니다.
예시: 반응형 그리드 레이아웃
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
.grid {
display: flex;
gap: 10px;
}
.grid-item {
flex: 1;
padding: 20px;
border: 5px solid #3498db;
box-sizing: border-box;
background-color: #f39c12;
text-align: center;
font-size: 24px;
}
- *
box-sizing: border-box*를 사용하여, 각 그리드 항목의 크기가 패딩과 테두리를 포함해도 유지됩니다. flex: 1: 그리드 항목이 동일한 크기로 분배됩니다.
- *CSS
box-sizing*은 요소의 크기 계산 방식을 제어하는 데 중요한 역할을 합니다. **content-box*는 기본값으로, 패딩과 테두리가 콘텐츠 크기에 추가되지만, **border-box*를 사용하면 패딩과 테두리가 지정된 크기 내에서 계산되어 예상 가능한 레이아웃을 유지할 수 있습니다. 특히, 반응형 웹 디자인에서 **box-sizing: border-box*를 사용하는 것은 요소의 크기를 일관되게 유지하고 레이아웃을 더 쉽게 관리할 수 있는 좋은 방법입니다.