박스 모델 시각화 도구

모든 HTML 요소는 직사각형 박스로 렌더링됩니다. CSS 박스 모델은 요소의 콘텐츠, 패딩, 보더, 마진 레이어가 어떻게 겹쳐서 요소가 페이지에서 차지하는 전체 공간을 결정하는지 설명합니다. 이 모델을 이해하는 것은 레이아웃과 간격 제어의 기본입니다.

마진, 보더, 패딩, 콘텐츠 크기의 숫자 입력을 조정하세요. 레이어 섹션을 클릭하면 다이어그램에서 해당 레이어가 강조 표시됩니다. 시각적 미리보기가 즉시 업데이트되며, 하단에서 해당 CSS 코드가 생성되어 복사할 수 있습니다.

마진(Margin)은 보더 바깥쪽의 투명한 공간으로 요소와 이웃 요소 사이를 분리합니다. 보더(Border)는 패딩을 둘러싼 보이는 경계선입니다. 패딩(Padding)은 보더와 실제 콘텐츠 사이의 공간입니다. 콘텐츠(Content)는 가장 안쪽 영역으로 텍스트와 자식 요소가 표시됩니다.

content-box(기본값)에서는 설정한 width와 height가 콘텐츠 영역에만 적용되며, 패딩과 보더가 그 위에 추가됩니다. border-box에서는 width와 height에 패딩과 보더가 포함되어 레이아웃 계산이 더 직관적입니다. 대부분의 현대 프로젝트는 border-box를 전역적으로 사용합니다.

이 비주얼라이저를 사용하여 다양한 값을 실험하고 각 레이어가 요소의 전체 크기에 어떻게 기여하는지 확인하세요. 요소가 예상보다 많은 공간을 차지할 때 패딩이나 보더 값이 의도한 너비를 초과하는지 확인하세요. 생성된 CSS는 프로젝트에 직접 붙여넣을 수 있습니다.