diff options
Diffstat (limited to 'files/ko/web/css/@page/index.html')
-rw-r--r-- | files/ko/web/css/@page/index.html | 96 |
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("<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> + +<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> |