문서 인쇄시 페이지 박스의 크기, 방향, 여백 등을 지정할 수 있다. 또한 콘텐츠 요소별로 출력 방식을 지정해 따로 프린트할 페이지를 구성할 수도 있다.
@page
규칙의 내부에서만 사용 가능한 페이지 바깥쪽 여백을 지정하기 위한 앳룰(at-rules)을 추가할 수 있다.
@page {
@top-left-corner { <declaration-list> }
@top-left { <declaration-list> }
@top-center { <declaration-list> }
@top-right { <declaration-list> }
@top-right-corner { <declaration-list> }
@bottom-left-corner { <declaration-list> }
@bottom-left{ <declaration-list> }
@bottom-center { <declaration-list> }
@bottom-right { <declaration-list> }
@bottom-right-corner { <declaration-list> }
@left-top { <declaration-list> }
@left-middle { <declaration-list> }
@left-bottom { <declaration-list> }
@right-top { <declaration-list> }
@right-middle { <declaration-list> }
@right-bottom { <declaration-list> }
}
Features | CSS Properties |
---|---|
bidi properties | direction |
background properties | background-color |
background-image | |
background-attachment | |
background-position | |
background | |
border properites | border-top-width |
border-right-width | |
border-bottom-width | |
border-left-width | |
border-width | |
border-top-color | |
border-right-color | |
border-bottom-color | |
border-left-color | |
border-color | |
border-top-style | |
border-right-style | |
border-bottom-style | |
border-left-style | |
border-style | |
border-top | |
border-right | |
border-bottom | |
border-left | |
border | |
counter properties | counter-reset |
counter-increment | |
color | |
font-properties | font-family |
font-size | |
font-style | |
font-variant | |
font-weight | |
font | |
height properties | height |
min-height | |
max-height | |
line-height | |
margin properties | margin-top |
margin-right | |
margin-bottom | |
margin-left | |
margin | |
outline properties | outline-width |
outline-style | |
outline-color | |
outline | |
padding properties | padding-top |
padding-right | |
padding-bottom | |
padding-left | |
padding | |
quotes | |
text properties | letter-spacing |
text-align | |
text-decoration | |
text-indent | |
text-transform | |
white-space | |
word-spacing | |
visibility | |
width properties | width |
min-width | |
max-width |
Features | CSS Properties |
---|---|
bidi properties | direction |
unicode-bidi | |
background properties | background-color |
background-image | |
background-repeat | |
background-attachment | |
background-position | |
background | |
border properites | border-top-width |
border-right-width | |
border-bottom-width | |
border-left-width | |
border-width | |
border-top-color | |
border-right-color | |
border-bottom-color | |
border-left-color | |
border-color | |
border-top-style | |
border-right-style | |
border-bottom-style | |
border-left-style | |
border-style | |
border-top | |
border-right | |
border-bottom | |
border-left | |
border | |
counter properties | counter-reset |
counter-increment | |
content | |
color | |
font-properties | font-family |
font-size | |
font-style | |
font-variant | |
font-weight | |
font | |
height properties | height |
min-height | |
max-height | |
line-height | |
margin properties | margin-top |
margin-right | |
margin-bottom | |
margin-left | |
margin | |
outline properties | outline-width |
outline-style | |
outline-color | |
outline | |
overflow | |
padding properties | padding-top |
padding-right | |
padding-bottom | |
padding-left | |
padding | |
quotes | |
text properties | letter-spacing |
text-align | |
text-decoration | |
text-indent | |
text-transform | |
white-space | |
word-spacing | |
vertical-align | |
visibility | |
width properties | width |
min-width | |
max-width | |
z-index |
@page <page-selector-list>? { <declaration-list> }
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
선언 목록을 나타낸다. 문법에서 블록의 유일한 값으로만 사용할 수 있으며 선언 목록 처리 알고리즘을 사용하여 블록의 내용을 구문 분석해야 함을 나타낸다.
콤마로 구분된 하나 이상의 <page-selector>
목록을 나타낸다.
<page-selector>#
페이지 유형 선택자(page type selector) 또는 페이지 가상 클래스(page pseudo-class)로 구성된 것을 나타낸다.
[ <ident-token>? <pseudo-page>* ]!
@page :left { } @page demo{ } @page demo:left { }
@page
앳룰(at-rules)에서 사용되는 페이지 가상 클래스를 나타낸다.
':' [ left | right | first | blank ]
[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.
페이지 박스 외부의 재단 물림 영역 범위, 즉 페이지 렌더링이 클리핑(clipping)되는 페이지 박스 너머의 범위를 지정한다.
auto | <length>
marks
디스크립터에 crop
이 지정된 경우 6pt
로 계산하고 그렇지 않으면 0
으로 계산한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
자르기 및 등록 표시를 추가한다. 프린트 후 쉽게 제본할 수 있도록 페이지 박스 외부에 인쇄된다.
none | [ crop || cross ]
자르기 표시를 인쇄하도록 한다.
등록 표시를 인쇄하도록 한다. 일반적으로 인쇄 프로세스 중에 용지를 정렬하는 데 사용되는 페이지 박스의 각 가장자리 바깥쪽에 십자 모양의 표시가 있다.
자르기 표시, 등록 표시를 인쇄하지 않도록 한다.
페이지 박스를 포함하는 블록의 대상 크기와 방향을 지정한다. 하나의 페이지 박스가 하나의 페이지 시트에 렌더링되는 일반적인 경우 size
디스크립터는 대상이 되는 페이지 시트의 크기도 나타낸다.
<length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]
<length>{1,2} 값은 페이지의 박스의 크기를 절대 치수로 설정한다. <length> 값이 하나만 지정되면 페이지 박스의 너비와 높이가 모두 동일한 값으로 설정된다. <length> 값이 두 개가 지정되면 첫 번째 값은 페이지 박스의 너비이고 두 번째 값은 페이지 박스의 높이를 설정한다.
em
및 ex
단위의 값은 페이지 컨텍스트의 글꼴을 나타낸다. 음수 값은 허용되지 않는다.
<page-size>는 허용된 미디어 크기 키워드 중에서 하나를 사용하여 페이지 크기를 지정할 수 있다. 그리고 방향을 나타내기 위해 landscape
또는 portrait
를 함께 지정할 수 있다.
페이지 박스는 유저 에이전트에서 선택한 크기와 방향으로 설정된다. 일반적인 경우 페이지 박스 크기와 방향은 대상 미디어 시트와 일치하도록 선택된다.
페이지의 콘텐츠가 가로 방향으로 인쇄되도록 지정한다. 페이지 박스의 긴 면은 가로로 인쇄된다. <page-size>를 지정하지 않으면 페이지 시트의 크기가 유저 에이전트에 의해 선택된다.
페이지의 콘텐츠가 세로 방향으로 인쇄되도록 지정한다. 페이지 박스의 짧은 면은 가로로 인쇄된다. <page-size>를 지정하지 않으면 페이지 시트의 크기가 유저 에이전트에 의해 선택된다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0
(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height
속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height
속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%
를 나타낸다.
뷰포트 높이를 상대적으로 1%
높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%
를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1
초를 1000
으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
미디어 표준화 이름 중에서 크기를 지정한 값을 나타낸다.
A5 | A4 | A3 | B5 | B4 | JIS-B5 | JIS-B4 | letter | legal | ledger
ISO A3 용지 크기(W: 297mm, H: 420mm)와 동일하다.
ISO A4 용지 크기(W: 210mm, H: 297mm)와 동일하다.
ISO A5 용지 크기(W: 148mm, H: 210mm)와 동일하다.
ISO B4 용지 크기(W: 250mm, H: 353mm)와 동일하다.
JIS B4 용지 크기(W: 257mm, H: 364mm)와 동일하다.
JIS B5 용지 크기(W: 182mm, H: 257mm)와 동일하다.
북미 레저(ledger) 용지 크기(W: 11inch, H: 17inch)와 동일하다.
북미 리갈(legal) 용지 크기(W: 8.5inch, H: 14inch)와 동일하다.
북미 레터(letter) 용지 크기(W: 8.5inch, H: 11inch)와 동일하다.
@page { 〈declaration-list〉 }
@page { size: 210cm 297cm; margin: 2cm; }
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Namespace Module Level 3 | 권장 | Last review date: 2023-4-13 |
웹 문서를 인쇄시 페이지 박스의 크기와 방향, 여백 등을 지정할 수 있다. 페이지 박스의 크기는 size
, 여백은 margin
속성으로 제어할 수 있다.
페이지의 박스의 크기는 size
속성으로 설정하며 인쇄되는 페이지의 영역의 크기는 페이지 박스의 크기에서 여백 영역을 뺀 값으로 사용한다. 여백은 margin
속성으로 정의할 수 있다.
auto
: 페이지 박스는 대상 출력 용지의 크기와 방향으로 설정된다.landscape
: 페이지 상자의 가로 세로 크기에서 긴 쪽이 가로 값으로 사용된다.portrait
: 페이지 상자의 가로 세로 크기에서 짧은 쪽이 가로 값으로 사용된다.<length>
: 직접 숫자와 단위를 지정하여 가로, 세로의 절대 크기로 설정한다. 공백으로 구분하여 차례대로 가로, 세로 값을 설정하되 하나만 설정하면 모두 동일한 크기로 설정된다. 백분율 단위는 사용할 수 없다.여백으로 설정할 수 있는 속성은 margin
또는 margin-top
, margin-right
, margin-bottom
, margin-left
로 설정할 수 있다.
@page {
size: auto;
margin: 3cm;
}