CSS size 속성이란?
CSS의 size 속성은 인쇄 시 사용되는 페이지 박스(page box)의 크기와 방향을 지정하는 속성입니다. 주로 @page 규칙과 함께 사용되며, 문서를 출력할 때 용지의 크기나 가로·세로 방향을 제어할 수 있습니다.
size 속성에는 총 네 가지 값을 사용할 수 있으며, 각각의 역할은 다음과 같습니다.
1. auto
페이지 박스가 출력 대상 용지(target sheet)의 크기와 방향에 자동으로 맞춰집니다. 별도의 지정 없이 기본 동작을 따르고 싶을 때 사용합니다.
2. landscape
대상 용지의 방향 설정을 무시(override)하고 가로 방향으로 지정합니다. 페이지 박스의 크기는 대상 용지와 동일하며, 더 긴 변이 수평(가로) 방향으로 배치됩니다.
3. portrait
대상 용지의 방향 설정을 무시하고 세로 방향으로 지정합니다. 페이지 박스의 크기는 대상 용지와 동일하며, 더 짧은 변이 수평(가로) 방향으로 배치됩니다.
4. length
길이 값(length)을 직접 지정하면 절대적인 크기의 페이지 박스가 생성됩니다. 길이 값을 하나만 입력하면 해당 값이 페이지 박스의 너비와 높이 모두에 적용되며, 두 개의 값을 입력하면 각각 너비와 높이로 설정됩니다. 단, size 속성에는 백분율(%) 값은 허용되지 않습니다.
size 속성 사용 예시
다음은 @page 규칙에서 size 속성을 활용하는 예시입니다.
@page {
size: A4 landscape;
}위 코드처럼 특정 용지 규격(A4 등)과 방향 키워드를 함께 조합하여 사용할 수도 있습니다. 이를 통해 웹 문서를 PDF로 변환하거나 인쇄할 때 원하는 용지 형태를 일관되게 유지할 수 있습니다.