4.1 box-sizing 속성
CSS에서 box-sizing 속성은 요소의 크기 측정 모델을 관리하기 위한 강력한 도구야.
요소의 너비와 높이뿐만 아니라 여백, 경계 및 외부 여백을 계산하는 방식을 결정해.
아래에서 box-sizing이 어떻게 작동하는지 자세히 살펴보고
이것이 웹 페이지 레이아웃에 어떻게 영향을 미칠 수 있는지 알아보자.
기본 box-sizing 모델
Content-box (컨텐츠 모델)
content-box 값은 모든 요소의 기본값이야. 이 모델에서는 요소의 크기
(width 및 height)가 여백과 경계를 제외한 컨텐츠의 크기만을 정의해.
즉, 여백과 경계가 요소의 전체 너비와 높이에 추가된다는 뜻이야.
Border-box (경계 모델)
border-box 값은 모델을 이렇게 변경해: 요소의 크기 (width 및 height)
가 여백과 경계를 포함해. 이게 의미하는 바는 여백과 경계가 요소의 전체 너비와 높이에 포함돼서
크기 계산과 관리가 더 간단해진다는 거야.
box-sizing 사용 예시:
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: 너비와 높이는 컨텐츠만 포함해.</div>
<div class="box border-box">Border-box: 너비와 높이는 여백과 경계를 포함해.</div>
코드 설명:
.box: 여백, 경계와 크기를 포함하는 모든 박스의 기본 스타일.content-box: width와 height가 컨텐츠만 포함하는 box-sizing: content-box.border-box: width와 height가 여백과 경계를 포함하는 box-sizing: border-box
4.2 box-sizing이 레이아웃에 미치는 영향
컨텐츠 모델 (Content-box)
box-sizing: content-box;가 사용될 때, 여백과 경계가 요소의 전체 너비와 높이에 추가돼.
추가 계산이 필요할 수 있어 크기와 위치를 결정할 때.
사용 예제
이 경우 요소의 전체 너비는
200px + 20px (padding) * 2 + 5px (border) * 2 = 250px,
전체 높이는 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: 너비와 높이는 컨텐츠만 포함해.</div>
경계 모델 (Border-box)
box-sizing: border-box;가 사용될 때, 여백과 경계가 지정된 요소의 너비와 높이에 포함돼.
이는 크기 계산과 요소 크기 관리가 더 쉬워지도록 해줘, 특히 반응형 레이아웃을 만들 때.
사용 예제:
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: 너비와 높이는 여백과 경계를 포함해.</div>
4.3 반응형 레이아웃 만들기
box-sizing: border-box;의 사용은 반응형 레이아웃 만들기를 더 쉽게 만들어줘,
왜냐면 요소 크기에 여백과 경계가 포함돼서, 예상치 못한 오버플로우를 방지해주기 때문이야.
사용 예제:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<div class="item">아이템 3</div>
<div class="item">아이템 4</div>
<div class="item">아이템 5</div>
<div class="item">아이템 6</div>
</div>
코드 설명:
* { box-sizing: border-box; }: 페이지 상의 모든 요소에 경계 모델을 적용해서 크기 관리를 쉽게 함.container: 반응형 레이아웃을 가진 Flex 컨테이너.item: padding과 border를 포함하는 균등한 너비 배분의 Flex 요소들
4.4 내부 여백이 있는 고정 크기
box-sizing: border-box;의 사용은 고정 크기의 요소를 쉽게 지정할 수 있게 해줘,
내부 여백이 있을 때 오버플로우를 걱정할 필요가 없이.
사용 예제:
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* 텍스트 수직 중앙 정렬 */
}
<div class="fixed-size">
고정 크기
</div>
코드 설명:
.fixed-size: padding과 border를 포함한 300x150 픽셀 고정 크기의 요소로 크기를 정확하게 제어할 수 있음
GO TO FULL VERSION