CSS @page 규칙이란?
CSS의 @page 규칙은 웹 문서를 인쇄할 때 페이지 상자(page box)의 크기, 방향, 여백 등을 지정할 수 있는 규칙입니다. 화면 출력이 아닌 인쇄물에 적용되는 스타일을 정의할 때 유용하게 사용됩니다.
페이지 상자의 실제 크기는 size 속성으로 설정합니다. 이때 콘텐츠가 실제로 배치되는 페이지 영역(page area)의 크기는 페이지 상자 전체 크기에서 여백(margin) 영역을 뺀 값이 됩니다.
@page 규칙 기본 예제
다음 예제는 페이지 상자의 크기를 8.5 × 11인치(미국 편지지 규격)로 설정하고, 페이지 상자 가장자리와 페이지 영역 사이에 네 방향 모두 2cm의 여백을 지정하는 코드입니다.
<style>
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>
용지 방향 지정하기
size 속성에는 가로·세로 길이 외에도 portrait(세로 방향) 또는 landscape(가로 방향) 키워드를 함께 사용할 수 있습니다. 예를 들어 A4 용지를 가로 방향으로 인쇄하고 싶다면 다음과 같이 작성합니다.
@page { size: A4 landscape; margin: 2cm }
이처럼 @page 규칙을 활용하면 별도의 인쇄 설정 없이도 CSS만으로 원하는 용지 크기와 여백을 일관되게 적용할 수 있습니다.