aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/css/@page/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/css/@page/index.html')
-rw-r--r--files/ko/web/css/@page/index.html96
1 files changed, 96 insertions, 0 deletions
diff --git a/files/ko/web/css/@page/index.html b/files/ko/web/css/@page/index.html
new file mode 100644
index 0000000000..dd9d2e2ac0
--- /dev/null
+++ b/files/ko/web/css/@page/index.html
@@ -0,0 +1,96 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>