CSS Rules

Editing

@page

문서 인쇄시 페이지 박스의 크기, 방향, 여백 등을 지정할 수 있다. 또한 콘텐츠 요소별로 출력 방식을 지정해 따로 프린트할 페이지를 구성할 수도 있다.

설명

여백 컨텍스트(margin context)

@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> }
}

페이지 컨텍스트(page context)에 포함할 수 있는 프로퍼티(properties)

FeaturesCSS Properties
bidi propertiesdirection
background propertiesbackground-color
background-image
background-attachment
background-position
background
border properitesborder-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 propertiescounter-reset
counter-increment
 color
font-propertiesfont-family
font-size
font-style
font-variant
font-weight
font
height propertiesheight
min-height
max-height
 line-height
margin propertiesmargin-top
margin-right
margin-bottom
margin-left
margin
outline propertiesoutline-width
outline-style
outline-color
outline
padding propertiespadding-top
padding-right
padding-bottom
padding-left
padding
 quotes
text propertiesletter-spacing
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
 visibility
width propertieswidth
min-width
max-width

여백 컨텍스트(margin context)에 포함할 수 있는 프로퍼티(properties)

FeaturesCSS Properties
bidi propertiesdirection
unicode-bidi
background propertiesbackground-color
background-image
background-repeat
background-attachment
background-position
background
border properitesborder-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 propertiescounter-reset
counter-increment
 content
 color
font-propertiesfont-family
font-size
font-style
font-variant
font-weight
font
height propertiesheight
min-height
max-height
 line-height
margin propertiesmargin-top
margin-right
margin-bottom
margin-left
margin
outline propertiesoutline-width
outline-style
outline-color
outline
 overflow
padding propertiespadding-top
padding-right
padding-bottom
padding-left
padding
 quotes
text propertiesletter-spacing
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
 vertical-align
 visibility
width propertieswidth
min-width
max-width
 z-index

선언

<@page>

DEVDIC-Specified Data Types

@page 앳룰(at-rules)의 구문 형식을 나타낸다.

  • CSS Paged Media Module Level 3
    @page <page-selector-list>? { <declaration-list> }

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <declaration-list>

    선언 목록을 나타낸다. 문법에서 블록의 유일한 값으로만 사용할 수 있으며 선언 목록 처리 알고리즘을 사용하여 블록의 내용을 구문 분석해야 함을 나타낸다.

  • <page-selector-list>

    콤마로 구분된 하나 이상의 <page-selector> 목록을 나타낸다.

    • CSS Paged Media Module Level 3
      <page-selector>#
    Details

    포함된 타입

    • <page-selector>

      페이지 유형 선택자(page type selector) 또는 페이지 가상 클래스(page pseudo-class)로 구성된 것을 나타낸다.

      • CSS Paged Media Module Level 3
        [ <ident-token>? <pseudo-page>* ]!
        @page :left {
        }
        @page demo{
        }
        @page demo:left {
        }
      Details

      포함된 타입

      • <ident-token>

        Ident Token Railroad Diagrams

        -- - a-z A-Z _ or non-ASCII escape a-z A-Z 0-9 _ - or non-ASCII escape
      • <pseudo-page>

        @page 앳룰(at-rules)에서 사용되는 페이지 가상 클래스를 나타낸다.

        • CSS Paged Media Module Level 3
          ':' [ left | right | first | blank ]

사용 가능한 디스크립터 및 특성

[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.

bleed 

페이지 박스 외부의 재단 물림 영역 범위, 즉 페이지 렌더링이 클리핑(clipping)되는 페이지 박스 너머의 범위를 지정한다.

사용 가능한 값

auto 

사용되는 타입

<bleed>

  • CSS Paged Media Module Level 3
    auto | <length>

사용되는 키워드

  • auto

    marks 디스크립터에 crop이 지정된 경우 6pt로 계산하고 그렇지 않으면 0으로 계산한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <length>

    숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

    • CSS Basic User Interface Module Level 4
      <length>
    Details

    사용되는 단위

    아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

    • cm

      1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

    • in

      1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

    • mm

      1cm의 1/10 값을 나타낸다.

    • pc

      1in의 1/16 값을 나타낸다.

    • pt

      1in의 1/72 값을 나타낸다.

    • px

      스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

    • Q

      1cm의 1/40을 나타낸다.

    • deg

      보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

    • grad

      400grad(그라디안)은 완전한 원을 만든다.

    • rad

      2π(라디안)이 완전한 원을 만든다.

    • turn

      1turn(턴)이 완전한 원을 만든다.

    • cap

      대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

    • ch

      글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

    • em

      대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

    • ex

      대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

    • ic

      한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

    • lh

      요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

    • rem

      html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

    • rlh

      html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

    • Hz

      1초당 발생한 진동수를 나타낸다.

    • kHz

      1000Hz를 나타낸다.

    • fr

      그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

    • vb

      html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vh

      뷰포트 높이를 상대적으로 1% 높이를 갖는다.

    • vi

      html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vmax

      vw 또는 vh 중 큰 값을 나타낸다.

    • vmin

      vw 또는 vh 중 작은 값을 나타낸다.

    • vw

      뷰포트 너비를 상대적으로 1% 폭을 갖는다.

    • dpcm

      1cm당 점(dot)의 수를 나타낸다.

    • dpi

      1in당 점(dot)의 수를 나타낸다.

    • dppx

      1픽셀(pixel)당 점(dot)의 수를 나타낸다.

    • ms

      1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

    • s

      초를 나타낸다.

marks 

자르기 및 등록 표시를 추가한다. 프린트 후 쉽게 제본할 수 있도록 페이지 박스 외부에 인쇄된다.

사용 가능한 값

none 

사용되는 타입

<marks>

  • CSS Paged Media Module Level 3
    none | [ crop || cross ]

사용되는 키워드

  • crop

    자르기 표시를 인쇄하도록 한다.

  • cross

    등록 표시를 인쇄하도록 한다. 일반적으로 인쇄 프로세스 중에 용지를 정렬하는 데 사용되는 페이지 박스의 각 가장자리 바깥쪽에 십자 모양의 표시가 있다.

  • none

    자르기 표시, 등록 표시를 인쇄하지 않도록 한다.

size 

페이지 박스를 포함하는 블록의 대상 크기와 방향을 지정한다. 하나의 페이지 박스가 하나의 페이지 시트에 렌더링되는 일반적인 경우 size 디스크립터는 대상이 되는 페이지 시트의 크기도 나타낸다.

사용 가능한 값

auto 

사용되는 타입

<page-size>

  • CSS Paged Media Module Level 3
    <length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]

    <length>{1,2} 값은 페이지의 박스의 크기를 절대 치수로 설정한다. <length> 값이 하나만 지정되면 페이지 박스의 너비와 높이가 모두 동일한 값으로 설정된다. <length> 값이 두 개가 지정되면 첫 번째 값은 페이지 박스의 너비이고 두 번째 값은 페이지 박스의 높이를 설정한다.

    emex 단위의 값은 페이지 컨텍스트의 글꼴을 나타낸다. 음수 값은 허용되지 않는다.

    <page-size>는 허용된 미디어 크기 키워드 중에서 하나를 사용하여 페이지 크기를 지정할 수 있다. 그리고 방향을 나타내기 위해 landscape 또는 portrait를 함께 지정할 수 있다.

사용되는 키워드

  • auto

    페이지 박스는 유저 에이전트에서 선택한 크기와 방향으로 설정된다. 일반적인 경우 페이지 박스 크기와 방향은 대상 미디어 시트와 일치하도록 선택된다.

  • landscape

    페이지의 콘텐츠가 가로 방향으로 인쇄되도록 지정한다. 페이지 박스의 긴 면은 가로로 인쇄된다. <page-size>를 지정하지 않으면 페이지 시트의 크기가 유저 에이전트에 의해 선택된다.

  • portrait

    페이지의 콘텐츠가 세로 방향으로 인쇄되도록 지정한다. 페이지 박스의 짧은 면은 가로로 인쇄된다. <page-size>를 지정하지 않으면 페이지 시트의 크기가 유저 에이전트에 의해 선택된다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <length>

    숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

    • CSS Basic User Interface Module Level 4
      <length>
    Details

    사용되는 단위

    아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

    • cm

      1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

    • in

      1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

    • mm

      1cm의 1/10 값을 나타낸다.

    • pc

      1in의 1/16 값을 나타낸다.

    • pt

      1in의 1/72 값을 나타낸다.

    • px

      스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

    • Q

      1cm의 1/40을 나타낸다.

    • deg

      보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

    • grad

      400grad(그라디안)은 완전한 원을 만든다.

    • rad

      2π(라디안)이 완전한 원을 만든다.

    • turn

      1turn(턴)이 완전한 원을 만든다.

    • cap

      대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

    • ch

      글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

    • em

      대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

    • ex

      대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

    • ic

      한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

    • lh

      요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

    • rem

      html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

    • rlh

      html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

    • Hz

      1초당 발생한 진동수를 나타낸다.

    • kHz

      1000Hz를 나타낸다.

    • fr

      그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

    • vb

      html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vh

      뷰포트 높이를 상대적으로 1% 높이를 갖는다.

    • vi

      html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

    • vmax

      vw 또는 vh 중 큰 값을 나타낸다.

    • vmin

      vw 또는 vh 중 작은 값을 나타낸다.

    • vw

      뷰포트 너비를 상대적으로 1% 폭을 갖는다.

    • dpcm

      1cm당 점(dot)의 수를 나타낸다.

    • dpi

      1in당 점(dot)의 수를 나타낸다.

    • dppx

      1픽셀(pixel)당 점(dot)의 수를 나타낸다.

    • ms

      1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

    • s

      초를 나타낸다.

  • <page-size>

    미디어 표준화 이름 중에서 크기를 지정한 값을 나타낸다.

    • CSS Paged Media Module Level 3
      A5 | A4 | A3 | B5 | B4 | JIS-B5 | JIS-B4 | letter | legal | ledger
    Details

    사용되는 키워드

    • A3

      ISO A3 용지 크기(W: 297mm, H: 420mm)와 동일하다.

    • A4

      ISO A4 용지 크기(W: 210mm, H: 297mm)와 동일하다.

    • A5

      ISO A5 용지 크기(W: 148mm, H: 210mm)와 동일하다.

    • B4

      ISO B4 용지 크기(W: 250mm, H: 353mm)와 동일하다.

    • JIS-B4

      JIS B4 용지 크기(W: 257mm, H: 364mm)와 동일하다.

    • JIS-B5

      JIS B5 용지 크기(W: 182mm, H: 257mm)와 동일하다.

    • ledger

      북미 레저(ledger) 용지 크기(W: 11inch, H: 17inch)와 동일하다.

    • legal

      북미 리갈(legal) 용지 크기(W: 8.5inch, H: 14inch)와 동일하다.

    • letter

      북미 레터(letter) 용지 크기(W: 8.5inch, H: 11inch)와 동일하다.

구문

  • CSS Namespace Module Level 3
    @page { 〈declaration-list〉
    }
    @page { size: 210cm 297cm; margin: 2cm;
    }

버전 명세

Modules
Module NameStatusSummary
CSS Namespace Module Level 3권장

Last review date: 2023-4-13

기술 문서

@page 규칙 기본 활용

웹 문서를 인쇄시 페이지 박스의 크기와 방향, 여백 등을 지정할 수 있다. 페이지 박스의 크기는 size, 여백은 margin 속성으로 제어할 수 있다.

페이지 박스의 크기와 여백

페이지의 박스의 크기는 size 속성으로 설정하며 인쇄되는 페이지의 영역의 크기는 페이지 박스의 크기에서 여백 영역을 뺀 값으로 사용한다. 여백은 margin 속성으로 정의할 수 있다.

페이지 박스의 크기로 사용되는 값의 종류
  • auto: 페이지 박스는 대상 출력 용지의 크기와 방향으로 설정된다.
  • landscape: 페이지 상자의 가로 세로 크기에서 긴 쪽이 가로 값으로 사용된다.
  • portrait: 페이지 상자의 가로 세로 크기에서 짧은 쪽이 가로 값으로 사용된다.
  • <length>: 직접 숫자와 단위를 지정하여 가로, 세로의 절대 크기로 설정한다. 공백으로 구분하여 차례대로 가로, 세로 값을 설정하되 하나만 설정하면 모두 동일한 크기로 설정된다. 백분율 단위는 사용할 수 없다.
여백 값으로 사용되는 속성

여백으로 설정할 수 있는 속성은 margin 또는 margin-top, margin-right, margin-bottom, margin-left로 설정할 수 있다.

설정 예제 코드

@page {
    size: auto;
    margin: 3cm;
}

 

지원 웹브라우저