:first

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

/* Selects the first page when printing */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
참고: :first 의사 클래스 안에서는 CSS  속성의 사용이 제한됩니다. 바깥 여백, orphans, widows와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 절대길이 단위만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.

구문

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

결과

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

명세

Specification Status Comment
CSS Paged Media Module Level 3
The definition of ':first' in that specification.
Working Draft No change
CSS Level 2 (Revision 1)
The definition of ':first' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
First page pseudo-class (:first)Chrome Full support 18Edge Full support 12Firefox No support NoIE Full support 8Opera Full support 9.2Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 18Firefox Android No support NoOpera Android Full support 10.1Safari iOS Full support 6Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

같이 보기