[[CSS]]로 화면과 [[인쇄]]의 모습을 다르게 정할 수 있다. 아래 예제는 웹 브라우저에서 읽던 원고를 A5 두 쪽으로 나누는 연습이다. 책을 접고 묶을 순서로 페이지를 배치하는 작업까지 대신하지는 않는다.
## 두 쪽을 준비하기
1. 아래 코드를 일반 텍스트 파일 `print.html`로 저장해 브라우저에서 연다.
2. 화면에서는 두 방과 안내 문장이 연달아 보이는지 확인한다.
3. 브라우저의 인쇄 메뉴에서 미리보기를 연다. 두 번째 방이 새 쪽에서 시작하고 화면용 안내가 빠지는지 본다.
4. 용지 크기, 배율, 머리글과 바닥글 설정을 확인한다. 브라우저나 인쇄 대화상자 설정이 결과에 영향을 줄 수 있다.
5. PDF로 저장해 쪽수뿐 아니라 첫 문장과 마지막 문장이 빠지지 않았는지 확인한다. 실제 출력은 한 부를 먼저 시험한다.
```html
두 쪽짜리 원고
첫 번째 방
종이는 창문을 최소화하는 방법이다.
두 번째 방
다음 장에도 아직 자리가 있다.
```
## 이 규칙이 하는 일
- `@media print` 안의 규칙은 인쇄 매체에 적용된다. 화면에서는 그대로 보이던 안내를 종이에서는 숨긴다.
- `@page`는 페이지의 크기와 여백을 지정한다. `section + section`은 앞에 다른 `section`이 있는 `section`을 고른다.
- 문장을 많이 늘리면 한 방이 여러 쪽으로 넘어갈 수 있다. 두 개의 방이 언제나 두 장이라는 보장은 없다.
- PDF의 쪽 나눔과 실제 프린터의 여백, 양면 출력은 서로 다를 수 있다. 종이의 앞뒤 사정은 [[한 장과 한 쪽의 차이]]에 적어두자.
접고 묶는 단계의 문제는 [[브라우저 인쇄와 판짜기]]로 이어진다.
## 참고
- [MDN의 인쇄용 CSS 안내](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing)
## 기타 등등
- `@page`에는 이름을 붙일 수 있다. 특정 내용에 이름 붙인 페이지 규칙을 연결해 가로로 긴 쪽을 따로 구성할 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page)
- `@page` 안의 `page-orientation`은 조판이 끝난 뒤 출력 방향을 회전시킨다. 페이지 상자의 크기와 방향을 정하는 `size`와 역할이 다르다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page)
#CSS #인쇄 #만들기 #출판