---
title: zoom
slug: Web/CSS/@viewport/zoom
tags:
  - CSS
  - CSS Descriptor
  - Graphics
  - Layout
  - NeedsExample
  - Reference
translation_of: Web/CSS/@viewport
translation_of_original: Web/CSS/@viewport/zoom
---
<div>{{ CSSRef }}</div>

<p><code>zoom</code> <a href="/ko/docs/Web/CSS">CSS</a> 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.</p>

<p><code>1.0</code> 또는 <code>100%</code>인 <em>줌 배율</em>은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.</p>

<p>{{cssinfo}}</p>

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

<pre class="brush:css">/* 키워드 값 */
zoom: auto;

/* &lt;number&gt; 값 */
zoom: 0.8;
zoom: 2.0;

/* &lt;percentage&gt; 값 */
zoom: 150%;
</pre>

<h3 id="값">값</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd>
</dl>

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

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Specifications" name="Specifications">명세</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('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td>
   <td>{{Spec2('CSS3 Device')}}</td>
   <td>초기 스펙</td>
  </tr>
 </tbody>
</table>

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

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