:first

Baseline 2023

Newly available

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

css

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

p {
  page-break-after: always;
}

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

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

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