🌱 기초 프론트엔드
CSS Box Model이란?
쉽게 이해하기
택배 상자를 생각해보세요. 안에 물건(content)이 있고, 물건 주변에 뽁뽁이(padding)가 있고, 상자 벽(border)이 있고, 상자와 다른 상자 사이에 공간(margin)이 있죠. 웹에서도 모든 요소가 이런 박스 구조로 되어 있어요.
핵심 정리
웹 요소는 내용, 여백, 테두리, 바깥여백으로 구성된 박스예요.
자세히 알아보기
CSS Box Model은 웹페이지의 모든 요소가 따르는 레이아웃 구조입니다. 4가지 영역으로 구성돼요. Content(내용), Padding(안쪽 여백), Border(테두리), Margin(바깥 여백)이죠.
Content는 텍스트나 이미지가 들어가는 실제 내용 영역이에요. Padding은 내용과 테두리 사이의 여백으로, 배경색이 적용됩니다. Border는 요소의 경계선이고, Margin은 다른 요소와의 간격을 만드는 바깥 여백이에요.
개발자 도구(F12)를 열어서 아무 요소나 클릭하면 오른쪽에 박스 모델이 시각적으로 보입니다. 파란색이 content, 초록색이 padding, 노란색이 border, 주황색이 margin이에요. 이걸 보면서 조정하면 레이아웃을 쉽게 수정할 수 있어요.
box-sizing 속성도 중요합니다. 기본값인 content-box는 width에 padding과 border가 포함되지 않아서, 실제 크기가 예상보다 커질 수 있어요. 그래서 보통 'box-sizing: border-box'를 써서 width에 padding과 border를 포함시킵니다. 이게 훨씬 직관적이에요.