[12일차] box-sizing

1. box-sizing / 레이아웃 설계

• box-sizing이란? : box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지 정하는 속성
• CSS에서 요소의 width와 height를 계산할 때 padding과 border를 포함할지 말지를 결정하는 속성입니다.

---

🧮 2가지 주요 값

1. content-box (기본값)

• width와 height는 오직 content 영역만을 포함.
• padding과 border는 크기에 추가됨.

css

box-sizing: content-box;

예시 css

width: 200px;
padding: 20px;
border: 10px; 

• 실제 박스 크기 = 200(width) + 2×20(padding) + 2×10(border) = 260px

---

2. border-box (많이 씀)

• width와 height에 padding과 border가 포함됨.
• 전체 박스 크기를 고정할 수 있어 레이아웃 관리가 편함.

css

box-sizing: border-box;

예시 css

width: 200px;
padding: 20px;
border: 10px; 

• 실제 전체 크기 = 200px 그대로 유지됨, 내부 content 영역이 줄어듦.

---

■ 왜 중요한가?

border-box를 사용하면 padding이나 border를 추가해도 박스 전체 크기가 변하지 않음.

그래서 예상대로 디자인을 맞추기 쉬움.

css

* {
  box-sizing: border-box;
}

• 모든 요소에 border-box 적용 → 유지보수와 레이아웃이 편해짐.

---

■ 요약

속성 값	의미	전체 크기 계산 방식
content-box	content만 width/height로 계산	content + padding + border
border-box	전체 박스를 고정 크기로 설정	padding, border 포함된 고정 박스