깨알 : box-sizing에 대해서

 

 

css에 대해 공부하던 중 box-sizing에 대한 개념을 잘 모르겠어서 한 번 써보는 글 

 

---

 

box-sizing이란? 개념 정리

CSS를 공부하던 중 box-sizing 개념이 헷갈려서 직접 정리해 봅니다.

HTML 요소는 기본적으로 내용(content) → 패딩(padding) → 테두리(border) → 마진(margin) 순으로 구성된 박스 모델(Box Model) 구조를 가지고 있어요.

 

CSS로 스타일을 추가하면서 padding이나 border 등을 적용하면, 원래 설정해 둔 width/height보다 박스 전체 크기가 커져서 레이아웃이 무너질 수 있어요. 그래서 이 문제를 방지하기 위해 box-sizing: border-box를 사용하는 것이 좋습니다.

 

box-sizing 종류 : content-box, border-box

 

종류에 관한 설명은 다른글에 적어놓았으니 링크 첨부합니다.

 

https://codechu.tistory.com/96

 

• width와 height가 전체 박스 크기가 됨
• padding, border가 안쪽으로 포함됨
• 즉, 박스의 전체 크기를 변하지 않게 유지하면서 안의 내용만 줄어들게 됨

전체 크기는 그대로!
내용(content)이 자동 조절됨!

/* 모든 요소에 border-box 적용 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

---

결론

✔ CSS 짤 때는 항상 box-sizing: border-box부터 깔고 시작하는 게 안정적이고 편합니다.