At-rules, Page

기본 사용법

@page는 다음과 같은 구문으로 사용할 수 있습니다:

@page {
  size: A4;
  margin: 20mm;
}

이 코드는 페이지 크기를 A4로 설정하고, 각 페이지에 20mm의 여백을 부여합니다.

주요 속성

• size: 페이지의 크기를 설정합니다. A4, letter 등의 표준 크기나 사용자 정의 크기를 설정할 수 있습니다. • margin: 페이지의 여백을 설정합니다. 상하좌우 여백을 각각 설정할 수 있습니다. • orientation: portrait(세로) 또는 landscape(가로)로 페이지 방향을 설정합니다.

의사 클래스

특정 페이지에만 스타일을 적용할 수 있는 의사 클래스도 존재합니다.

• :first: 첫 번째 페이지에만 스타일을 적용합니다. • :left, :right: 양면 인쇄 시 홀수/짝수 페이지에 각각 다른 스타일을 적용할 수 있습니다.

기본 여백 설정 필요성

인쇄 레이아웃을 설계할 때 여백을 기본적으로 설정하는 것이 중요합니다. 각 프린터마다 기본 여백 설정이 다를 수 있어, 원하는 출력 결과를 보장하려면 명시적으로 여백을 설정해야 합니다.

예시로, 모든 페이지에 20mm의 기본 여백을 설정하려면 다음과 같이 작성할 수 있습니다:

@page {
  margin: 20mm;
}

이렇게 기본 여백을 설정함으로써 페이지 레이아웃이 일관성 있게 유지되고, 인쇄 시 의도한 디자인이 보존될 수 있습니다.

이 TIL은 웹 페이지를 인쇄할 때 레이아웃을 제어할 수 있는 유용한 방법을 배운 기록입니다. @page 규칙을 잘 활용하면 인쇄물의 품질을 향상시킬 수 있습니다.