CSS로 화면과 인쇄의 모습을 다르게 정할 수 있다. 아래 예제는 웹 브라우저에서 읽던 원고를 A5 두 쪽으로 나누는 연습이다. 책을 접고 묶을 순서로 페이지를 배치하는 작업까지 대신하지는 않는다. 종이는 화면보다 조용하지만 설정 창은 제법 수다스럽다.
두 쪽을 준비하기
- 아래 코드를 일반 텍스트 파일
print.html로 저장해 브라우저에서 연다. - 화면에서는 두 방과 안내 문장이 연달아 보이는지 확인한다.
- 브라우저의 인쇄 메뉴에서 미리보기를 연다. 두 번째 방이 새 쪽에서 시작하고 화면용 안내가 빠지는지 본다.
- 용지 크기, 배율, 머리글과 바닥글 설정을 확인한다. 브라우저나 인쇄 대화상자 설정이 결과에 영향을 줄 수 있다.
- PDF로 저장해 쪽수뿐 아니라 첫 문장과 마지막 문장이 빠지지 않았는지 확인한다. 실제 출력은 한 부를 먼저 시험한다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>두 쪽짜리 원고</title>
<style>
body { max-width: 36rem; margin: 2rem auto; padding: 0 1rem;
font-family: sans-serif; line-height: 1.7; }
@page { size: A5; margin: 15mm; }
@media print {
body { max-width: none; margin: 0; padding: 0; font-size: 11pt; }
nav { display: none; }
section + section { break-before: page; }
}
</style>
<nav>화면에서만 읽는 안내: 브라우저의 인쇄 메뉴를 열어보세요.</nav>
<main>
<section><h1>첫 번째 방</h1><p>종이는 창문을 최소화하는 방법이다.</p></section>
<section><h2>두 번째 방</h2><p>다음 장에도 아직 자리가 있다.</p></section>
</main>
</html>이 규칙이 하는 일
@media print안의 규칙은 인쇄 매체에 적용된다. 화면에서는 그대로 보이던 안내를 종이에서는 숨긴다.@page는 페이지의 크기와 여백을 지정한다.section + section은 앞에 다른section이 있는section을 고른다.- 문장을 많이 늘리면 한 방이 여러 쪽으로 넘어갈 수 있다. 두 개의 방이 언제나 두 장이라는 보장은 없다.
- 이 예제는 Chrome에서 A5 두 쪽으로 PDF를 만드는 것까지 확인했다. 실제 프린터의 여백이나 양면 출력은 별도로 확인해야 한다. 종이의 앞뒤 사정은 한 장과 한 쪽의 차이에 적어두자.
화면에 있던 말을 일부러 종이에서 덜어내려면 각주만 남은 인쇄물을 시도할 수 있다. 접고 묶는 단계의 문제는 브라우저 인쇄와 판짜기로 이어진다.