--- 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("<length>")}} 단위, <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>