:first

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

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

구문

:first

예제

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();
});

결과

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

명세

브라우저 호환성

같이 보기

• @page
• 페이지 관련 다른 의사 클래스: :left, :right