CSS 페이지 박스(Page Box)란?
페이지 박스(page box)는 웹 문서를 인쇄하거나 PDF로 출력할 때 실제 용지에 배치되는 콘텐츠 영역 전체를 의미하는 CSS 개념입니다. 페이지 박스는 실제 내용이 들어가는 페이지 영역(page area)과 그 주위를 감싸는 여백 영역(margin area)으로 구성됩니다.
@page 규칙으로 페이지 박스 정의하기
@page 규칙 안에서 페이지 박스의 크기, 방향(orientation), 여백 등을 지정할 수 있습니다. 페이지 박스의 크기는 size 속성으로 설정하며, 페이지 영역의 크기는 페이지 박스 전체 크기에서 여백 영역을 제외한 나머지 부분이 됩니다.
예를 들어 다음 @page 규칙은 페이지 박스 크기를 8.5 × 11인치(미국 편지지 규격)로 설정하고, 페이지 박스 가장자리와 페이지 영역 사이에 네 방향 모두 2cm의 여백을 만듭니다.
<style>
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>
여백(Margin) 설정하기
@page 규칙 내에서 margin, margin-top, margin-bottom, margin-left, margin-right 속성을 사용하여 페이지의 여백을 세부적으로 지정할 수 있습니다. 이를 통해 위, 아래, 좌, 우 여백을 각각 다르게 구성하는 것도 가능합니다.
재단선과 맞춤 표시(Marks) 추가하기
마지막으로 marks 속성은 @page 규칙 안에서 사용되며, 대상 용지의 페이지 박스 바깥쪽에 재단선(crop mark)과 맞춤 표시(registration mark)를 생성합니다. 기본적으로는 어떠한 표시도 인쇄되지 않습니다.
- crop 키워드: 용지가 어디서 잘려야 하는지를 보여주는 재단선을 만듭니다.
- cross 키워드: 인쇄 시 색상 정렬을 확인하는 데 사용되는 맞춤 표시를 만듭니다.
필요에 따라 두 키워드 중 하나만 사용하거나, 두 키워드를 함께 사용하여 인쇄 페이지에 재단선과 맞춤 표시를 동시에 출력할 수도 있습니다.