---
title: '@page'
slug: Web/CSS/@page
tags:
  - At-rule
  - CSS
  - Layout
  - Reference
  - Web
translation_of: Web/CSS/@page
---
<div>{{CSSRef}}</div>

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

<pre class="brush: css">@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
</pre>

<p><code>@page</code> @규칙은 CSS 객체 모델 인터페이스 {{domxref("CSSPageRule")}}를 통해 액세스될 수 있습니다.</p>

<div class="note"><strong>주의:</strong> W3C은 viewport 관련 {{cssxref("&lt;length&gt;")}} 단위, <code>vh</code>, <code>vw</code>, <code>vmin</code> 및 <code>vmax</code> 처리법을 논의 중입니다. 그 동안에 <code>@page</code> @규칙 내에서 사용하지 마세요.</div>

<h2 id="구문">구문</h2>

<h3 id="서술자">서술자</h3>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
 <dd>페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다. 한 페이지 박스가 한 페이지 시트에 렌더링 되는 일반적인 경우에, 또한 대상(destination) 페이지 시트의 크기를 나타냅니다.</dd>
</dl>

<dl>
 <dt><a href="/ko/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
 <dd>문서에 crop 및/또는 registration 마크를 추가합니다.</dd>
</dl>

<dl>
 <dt><a href="/ko/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
 <dd>페이지 렌더링이 잘리는(clip) 페이지 박스 너머 범위를 지정합니다.</dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

{{csssyntax}}

<h2 id="예제">예제</h2>

<p>예제를 위한 <code>@page</code>의 다양한 <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">가상 클래스</a> 참조해 주세요.</p>

<ul>
 <li>{{Cssxref(":blank")}}</li>
 <li>{{Cssxref(":first")}}</li>
 <li>{{Cssxref(":left")}}</li>
 <li>{{Cssxref(":right")}}</li>
 <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
 <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td><code>:recto</code> 및 <code>:verso</code> 페이지 선택자 추가</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
   <td>{{Spec2('CSS3 Paged Media')}}</td>
   <td>{{SpecName('CSS2.1')}}에서 변화 없음, 더 많은 CSS at-규칙이 <code>@page</code> 내에 사용될 수 있지만.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>초기 정의</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("css.at-rules.page")}}</p>