문제
PDF 인쇄 및 출력 시 첫 페이지가 공백으로 출력되고,
특정 기준(송장번호)으로 페이지 나누기(page-break-after: always)가 동작하지 않음
1. #printDiv에 position: absolute 추가 : 첫 페이지 공백 해결, 페이지 나누기 안 됨
2. #printDiv에 position: fixed 추가첫 페이지 공백 해결, 페이지 나누기 안 됨
3. #printDiv에 position 제거: 페이지 나누기 정상, 첫 페이지 공백 재발
4. console.log로 부모 체인 디버깅: 근본 원인 발견
원인
AdminLTE의 CSS가 .content-wrapper에 overflow: hidden을 적용하고 있었음
- overflow: hidden → Block Formatting Context(BFC) 생성
- BFC 내부에서는 브라우저 인쇄 엔진이 부모 경계를 넘는 page-break를 삽입하지 않음
- #printDiv가 .content-wrapper 안에 있으므로 page-break-after: always가 무시됨
그리고 visibility: hidden은 요소를 숨기되 공간은 유지하므로, position 없이는 숨겨진 요소들의 공간이 #printDiv를 밀어내어 첫
페이지가 공백이 됨
해결 방법
@media print {
.content-wrapper { overflow: visible !important; }
}
- overflow: visible로 BFC를 해제하여 page-break 정상 동작
- position: absolute로 숨겨진 요소들의 공간을 무시하고 첫 페이지 공백 해결
알게 된 것
1. overflow: hidden은 자손의 page-break를 차단한다 — BFC 경계를 넘는 페이지 나누기를 브라우저가 삽입하지 않음
2. position: absolute/fixed는 page-break를 무효화한다 — 문서 흐름에서 벗어난 요소에 page-break가 적용되지 않음
단, overflow: visible로 BFC를 해제하면 position: absolute에서도 page-break가 동작함
3. visibility: hidden은 display: none과 다르다 — 요소를 안 보이게 하지만 공간은 그대로 차지함
4. 직접 작성한 CSS에 없더라도 프레임워크가 적용한 overflow, transform 등이 인쇄 레이아웃에 영향을 줌
5. getComputedStyle로 부모 체인을 추적하면 원인을 빠르게 찾을 수 있다