CSS의 본질은 박스를 다루는 기술이다.텍스트, 이미지, 버튼, 섹션 — 전부 하나의 ‘박스’로 구성되어 있다.이번 글에서는 박스 모델(Box Model) 의 개념부터margin, padding, border의 관계, 그리고 실무에서의 레이아웃 활용법까지한눈에 이해할 수 있도록 정리했다.💡 1. 박스 모델(Box Model)이란?“모든 HTML 요소는 눈에 보이지 않아도 하나의 상자(Box)다.”브라우저는 HTML 요소를 박스 형태의 레이어로 렌더링한다.이 박스는 네 부분으로 구성된다 👇┌─────────────────────────────┐ ← margin (바깥 여백) │ ┌─────────────────────────┐ │ │ │ border (테두리) │ │ │ │ ┌──────..