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();
});
결과
"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.
명세
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 |
브라우저 호환성
BCD tables only load in the browser
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.