:first

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

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

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

구문

Error: could not find syntax for this item

예제

HTML

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

CSS

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

p {
  page-break-after: always;
}

JavaScript

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

결과

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

명세

Specification
Unknown specification # left-right-first

브라우저 호환성

BCD tables only load in the browser

같이 보기

@page
페이지 관련 다른 의사 클래스: :left (en-US), :right (en-US)