Css to set A4 paper in web and allow to print 브라우저에서 A4 사이즈로 인쇄

오래전에 온라인 계약서 제작을 위해 정리했던 글
블로그 업데이트로 삭제되었던 글인데 최근에도 니즈가 있는지 접속로그가 보여서 다시 작성해보았다.

HTML 페이지를 A4사이즈로 프린트 할 때 쓰이는 CSS

HTML

<div>
    <div class="paper">
        <div class="content">Page 1</div>
    </div>
    <div class="paper">
        <div class="content">Page 2</div>
    </div>
</div>

CSS

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.paper {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm; /* 인쇄 여백 */
    margin: 10mm auto;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.content {
    padding: 0;
    border: 1px #888 dotted; /* 인쇄 사이즈 미리보기용 테두리 */
    height: 257mm;
}
@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        width: 210mm;
        height: 297mm;
        background: #fff;
    }
    .paper {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
    .content {
	    border: 0;  /* 인쇄 사이즈 미리보기용 테두리 숨기기 */
	}
}

javascript

window.print();