CSS 박스 모델 시각화 도구

사용 방법

1. 박스 모델 값 입력: 필드나 대화형 슬라이더에서 마진, 테두리, 패딩 및 콘텐츠 크기를 정의하세요.
2. 시각화 탐색: 중첩된 상자의 클래식 다이어그램이 실시간으로 업데이트됩니다 — 마진(주황색), 테두리(노란색), 패딩(녹색) 및 콘텐츠(파란색), 모두 명확하게 라벨이 지정되어 있습니다.
3. CSS 복사: CSS 복사를 클릭하여 구성된 요소의 전체 박스 모델 속성을 가져오세요.

CSS 박스 모델 시각화 도구를 사용하는 이유는?

CSS 박스 모델은 웹 레이아웃의 가장 기본적인 개념 중 하나이며 — 가장 일반적인 버그 원인 중 하나이기도 합니다. 특히 box-sizing 값, 마진 병합 및 테두리 크기 조정을 혼합할 때 그렇습니다. 이 대화형 시각화 도구는 박스 모델을 구체적이고 실체적으로 만듭니다: 값을 조정하면 마진, 테두리 및 패딩이 콘텐츠 주위에 어떻게 쌓이는지 즉시 확인할 수 있습니다. CSS 학습, 디버깅 및 교육에 필수적입니다.

기능

• 대화형 다이어그램: 색상으로 코딩된 레이어(마진, 테두리, 패딩, 콘텐츠)가 있는 중첩된 박스 모델의 클래식 보기.
• box-sizing 토글: 각 모드가 총 크기에 어떤 영향을 미치는지 보기 위해 content-box와 border-box 사이를 전환하세요.
• 개별 측면: 마진, 패딩 및 테두리에 대해 위/오른쪽/아래/왼쪽 값을 독립적으로 정의하세요.
• 총 크기 계산: 요소의 계산된 총 너비와 높이를 표시합니다.
• CSS 출력: 구성된 박스 모델에 대해 즉시 사용 가능한 CSS를 생성합니다.

자주 묻는 질문

content-box와 border-box의 차이점은 무엇입니까?

content-box(기본값)에서 width와 height는 콘텐츠 영역에만 적용됩니다 — 패딩과 테두리는 요소의 총 크기에 추가됩니다. border-box에서는 width와 height에 패딩과 테두리가 포함되어 크기를 더 예측 가능하게 만듭니다. 대부분의 최신 CSS 리셋은 모든 요소에 box-sizing: border-box를 적용합니다.

마진 병합이란 무엇입니까?

두 개의 수직 마진이 닿을 때(인접한 블록 요소 사이 또는 부모와 첫/마지막 자식 사이), 두 값 중 더 큰 단일 마진으로 병합됩니다. 이는 flex나 grid 자식, 또는 패딩이나 테두리가 있는 요소와는 발생하지 않습니다.

인라인 요소 아래의 추가 공간을 어떻게 제거합니까?

인라인 요소(<img>와 같은)는 line-height 기준선 정렬로 인해 그 아래에 작은 공간이 있습니다. 요소에 display: block을 설정하거나, vertical-align: bottom 또는 부모에 font-size: 0을 설정하여 수정하세요.