CSS에서 페이지 크기를 설정하는 4가지 값
CSS의 @page 규칙에서 size 속성을 사용하면 인쇄물의 페이지 크기를 제어할 수 있습니다. 사용할 수 있는 값은 다음 네 가지입니다.
1. auto
페이지 박스(page box)가 출력 대상 용지의 크기와 방향에 자동으로 맞춰집니다. 별도의 지정이 없을 때 적용되는 초기값입니다.
2. landscape (가로 방향)
대상 용지의 기본 방향을 무시하고 가로 방향으로 강제 지정합니다. 페이지 박스의 크기는 대상 용지와 동일하며, 긴 변이 수평(가로) 방향으로 배치됩니다.
3. portrait (세로 방향)
대상 용지의 기본 방향을 무시하고 세로 방향으로 강제 지정합니다. 페이지 박스의 크기는 대상 용지와 동일하며, 짧은 변이 수평(가로) 방향으로 배치됩니다.
4. length (길이 값)
size 속성에 길이 값을 지정하면 절대적인 크기의 페이지 박스가 생성됩니다. 길이 값을 하나만 입력하면 해당 값이 너비와 높이 모두에 적용되며, 두 개를 입력하면 각각 너비와 높이로 설정됩니다. 단, size 속성에는 백분율(%) 값을 사용할 수 없습니다.
예제: 여백(margin)과 페이지 크기 활용하기
아래 예제에서는 페이지 박스의 바깥쪽 가장자리가 출력 대상 용지에 정렬됩니다. margin 속성의 백분율 값은 대상 용지 크기를 기준으로 계산되므로, A4 용지(21.0cm × 29.7cm)에 인쇄할 경우 여백은 각각 2.10cm와 2.97cm가 됩니다.
<style type = "text/css">
<!--
@page {
size: auto; /* auto는 초기값입니다 */
margin: 10%;
}
-->
</style>이처럼 @page 규칙을 활용하면 웹 문서를 인쇄할 때 용지 크기, 방향, 여백 등을 세밀하게 제어할 수 있어 인쇄 최적화된 스타일시트를 만드는 데 유용합니다.