직접 모달창을 만들어 띄웠는데, 계속 Header에서 내가 준 margin-top 만큼 배경처리가 안되는 현상이 발생했고, 그 원인이 margin-collapse 라는 것을 알게 됐다.
아래는 해결전 헤더부분에는 어두운 배경이 적용되지 않는 모습이다.
구글링을 하다 보니, 이 이유는 margin-collapsing 때문이었다.
마진상쇄 라는 개념은 여러 블록의 위쪽 및 아래쪽 마진이 경우에 따라 가장 큰 여백을 가진 단일 마진으로 상쇄(혹은 결합)되는 현상을 의미한다. 단, float / absolute 항목의 여백은 절대 상쇄되지 않는다.
이 현상은 아래의 3가지 경우에 발생한다. (mdn은 최고다.)
(참조링크 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
이 경우, 두 마진 값을 비교하여 더 큰 값의 마진으로 상쇄하게 된다. 만약 값이 같다면, 단일 마진으로 렌더하게 된다.
부모 자손간의 margin-collapsing은 아래 두 경우에 일어난다. 그리고 이때 상쇄된 마진은 부모 요소의 바깥에 생성되게 된다.