@page

Baseline 2024 *
Newly available

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

* Some parts of this feature may have varying levels of support.

@page CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. @page로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.

css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

@page @규칙은 CSS 객체 모델 인터페이스 CSSPageRule를 통해 액세스될 수 있습니다.

참고 : W3C은 viewport 관련 <length> 단위, vh, vw, vminvmax 처리법을 논의 중입니다. 그 동안에 @page @규칙 내에서 사용하지 마세요.

구문

서술자

size

페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다. 한 페이지 박스가 한 페이지 시트에 렌더링 되는 일반적인 경우에, 또한 대상(destination) 페이지 시트의 크기를 나타냅니다.

marks

문서에 crop 및/또는 registration 마크를 추가합니다.

bleed

페이지 렌더링이 잘리는(clip) 페이지 박스 너머 범위를 지정합니다.

형식 구문

@page = 
@page <page-selector-list>? { <declaration-rule-list> }

<page-selector-list> =
<page-selector>#

<page-selector> =
[ <ident-token>? <pseudo-page>* ]!

<pseudo-page> =
':' [ left | right | first | blank ]

예제

예제를 위한 @page의 다양한 가상 클래스 참조해 주세요.

명세

Specification
CSS Paged Media Module Level 3
# at-page-rule
CSS Logical Properties and Values Level 1
# page

브라우저 호환성

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
@page
@bottom-center page-margin box
Experimental
@bottom-left page-margin box
Experimental
@bottom-left-corner page-margin box
Experimental
@bottom-right page-margin box
Experimental
@bottom-right-corner page-margin box
Experimental
@left-bottom page-margin box
Experimental
@left-middle page-margin box
Experimental
@left-top page-margin box
Experimental
page-orientation descriptor
@right-bottom page-margin box
Experimental
@right-middle page-margin box
Experimental
@right-top page-margin box
Experimental
size descriptor
jis-b4 page size
jis-b5 page size
@top-center page-margin box
Experimental
@top-left page-margin box
Experimental
@top-left-corner page-margin box
Experimental
@top-right page-margin box
Experimental
@top-right-corner page-margin box
Experimental

Legend

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

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.