: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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
First page pseudo-class (:first)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기