:first
CSS :first
의사 클래스는 @page
@-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.
css
/* Selects the first page when printing */
@page :first {
margin-left: 50%;
margin-top: 50%;
}
구문
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
First page pseudo-class ( :first ) |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.