:first

CSS :first 의사 클래스는 @page @-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.

css
/* Selects the first page when printing */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

참고: first 의사 클래스 안에서는 CSS 속성의 사용이 제한됩니다. 바깥 여백, orphans, widows와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 절대길이 단위만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.

구문

Error: could not find syntax for this item

예제

HTML

html
<p>First Page.</p>
<p>Second Page.</p>
<button>출력!</button>

CSS

css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});

결과

"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.

명세

Specification
CSS Paged Media Module Level 3
# left-right-first

브라우저 호환성

BCD tables only load in the browser

같이 보기