기본 박스 모델에서 벗어나기 – box-sizing: border-box 완전 정복

안녕하세요! 이번 포스팅에서는 사이드바에 패딩을 추가하다 생긴 박스 크기 붕괴 문제를 살펴보고, 이를 box‑sizing: border-box 로 한 방에 해결하는 방법을 알아볼게요. ✨

---

1️⃣ 문제 상황: 패딩을 추가하자!

• 사이드바(aside)에 padding: 40px;을 넣자
• 원래 width: 300px;이던 박스가 총 380px로 커져서 레이아웃 밖으로 튀어나옴
• 원인: 기본 박스 모델(content-box)은 지정 너비에 패딩/보더를 “추가”하기 때문

---

2️⃣ 해결책: box-sizing: border-box

• 개념
  • border-box 모드에서는 padding과 border를 포함해 전체 박스 크기를 계산
  • 지정한 너비(높이)가 “컨텐츠+패딩+보더” 모두를 아우르는 값이 됨
• 코드 적용

/* 전역 Reset 예시 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 모든 요소에 적용 */
}

• 효과
  • aside { width: 300px; padding: 40px; } 일 때도
  • 최종 박스 너비 = 300px (속성에서 지정한 대로)
  • 내부 콘텐츠 영역은 300 − 40 − 40 = 220px 로 자동 조정

---

3️⃣ 왜 꼭 써야 할까?

기본(content-box)border-box

지정 너비 + padding → 실제 커짐	padding·border 포함 → 항상 지정 크기 유지
레이아웃 계산이 번거로움	박스 크기 예측·계산이 단순·명확

 

💡 Tip: 모든 CSS 프로젝트에서 첫 줄에 *, *::before, *::after { box-sizing: border-box; } 를 선언하는 걸 추천해요!

---

4️⃣ 마무리 & 다음 예고

이제 박스 모델 헷갈림 없이 레이아웃을 깔끔하게 다룰 수 있어요!
다음 포스팅에서는 이 설정을 바탕으로 Flexbox 또는 CSS Grid 레이아웃으로 확장해볼 예정이니, 기대해주세요. 😉

도움이 되셨다면 공감 ❤️과 구독 ⭐ 부탁드리고, 댓글로 궁금한 점 남겨주세요!