CSS Box Model은 웹 페이지를 레이아웃하는 기본 개념 중 하나로, 각각의 HTML 요소를 하나의 상자로 보고 그 상자가 어떻게 문서 내에서 다른 요소들과 관계를 맺는지를 정의합니다. Box Model의 각 부분은 다음과 같습니다:
- Content: 텍스트, 이미지 또는 다른 미디어 등 요소의 실제 내용이 들어가는 공간입니다.
- Padding: 내용과 테두리(border) 사이의 영역으로, 내부 여백을 제공합니다. 이 공간은 요소의 배경색이나 배경 이미지에 영향을 받습니다.
- Border: 패딩을 둘러싸는 선으로, 요소의 외곽선입니다. border 속성을 통해 크기, 스타일, 색상을 설정할 수 있습니다.
- Margin: 테두리 바깥쪽에 위치하며, 다른 요소와의 공간(외부 여백)을 생성합니다. 마진은 배경색이나 이미지에 영향을 받지 않습니다.
box-sizing 속성이 content-box로 설정되었을 때, width와 height 속성은 기본적으로 content 영역만을 지정합니다 CSS3에서 box-sizing 속성을 border-box로 설정하면, width와 height 속성이 패딩과 테두리를 포함한 총 너비와 높이를 지정하게 됩니다. 이 방식을 사용하면 더 직관적인 레이아웃 설계가 가능합니다.
마진 병합 현상(Margin Collapsing) 또는 마진 중복이라고도 하는 CSS의 기능은 인접하는 블록 요소들의 상하 마진이 결합되어 하나의 마진으로 합쳐지는 현상을 말합니다. 이 현상은 다음과 같은 상황에서 발생합니다:
- 인접 형제 요소: 같은 부모를 공유하는 블록 레벨 요소들의 상하 마진이 겹칠 때, 두 마진 중 큰 값으로 결합됩니다.
- 부모-자식 요소: 부모 요소에 상단 마진이 없고 자식 요소에 상단 마진이 있을 경우, 이 마진은 부모 요소의 상단으로 "누출"될 수 있습니다. 이는 부모 요소에 상단 패딩이나 테두리가 없을 때 발생합니다.
- 빈 블록: 상하 마진이 있는 빈 블록 요소의 경우, 마진이 결합되어 요소의 마진이 하나처럼 보일 수 있습니다.
마진 병합을 방지하는 몇 가지 방법은 다음과 같습니다:
- 인라인 블록 또는 플로트: 인라인 블록 또는 플로트 요소는 마진 병합 현상이 적용되지 않습니다.
- 패딩 또는 테두리 사용: 부모 요소에 최소한 1픽셀의 패딩이나 테두리를 추가하면 자식 요소의 마진이 부모 요소 바깥으로 누출되는 것을 방지할 수 있습니다.
- 절대 위치 지정: 절대 위치가 지정된 요소의 마진은 병합되지 않습니다.
- 오버플로 속성 변경: 부모 요소에 overflow: hidden, overflow: auto, 또는 overflow: scroll을 적용하면 마진 병합을 방지할 수 있습니다.
마진 병합은 때로는 원치 않은 레이아웃 이슈를 발생시킬 수 있지만, 문서 흐름을 이해하고 의도적으로 사용한다면 코드를 더 간결하게 만들고, 레이아웃을 효과적으로 구성하는 데 도움이 될 수 있습니다.