initial commit

4 files changed, 337 insertions, 0 deletions

diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..4a97de7c7f
--- /dev/null
+++ b/files/ko/web/css/@viewport/height/index.html
@@ -0,0 +1,75 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - '@viewport'
+  - CSS
+  - CSS Descriptor
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>height</strong></code> CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.</p>
+
+<p>뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 한 값 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* 두 값 */
+height: 320px 200px;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>다른 CSS 설명자의 값에서 계산된 사용값(used value).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>음이 아닌 절대 또는 상대 길이.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<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('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport.height")}}</p>
diff --git a/files/ko/web/css/@viewport/index.html b/files/ko/web/css/@viewport/index.html
new file mode 100644
index 0000000000..e77278c61e
--- /dev/null
+++ b/files/ko/web/css/@viewport/index.html
@@ -0,0 +1,120 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> lets you configure the {{glossary("viewport")}} through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).</p>
+
+<p>Lengths specified as percentages are calculated relative to the <strong>initial viewport</strong>, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. This is typically based on the size of the window on desktop browsers that aren't in full screen mode.</p>
+
+<p>On mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. This may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).</p>
+
+<pre class="brush: css no-line-numbers">@viewport {
+  width: device-width;
+}</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The at-rule contains a set of nested {{glossary("descriptor (CSS)", "descriptor")}}s in a CSS block that is delimited by curly braces.</p>
+
+<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<p>Browser support for <code>@viewport</code> is weak at this time, with support being largely available in Internet Explorer and Edge. Even in those browsers, only a small number of descriptors are available. Browsers will ignore <code>@viewport</code> if they don't support it, and will ignore any descriptors that they don't recognize.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Sets the initial zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Sets the minimum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Sets the maximum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Controls whether or not the user should be able to change the zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>Controls the document's orientation.</dd>
+ <dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt>
+ <dd>Controls the display of the document on non-rectangular displays.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Defined the {{cssxref("@viewport/viewport-fit", "viewport-fit")}} descriptor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html
new file mode 100644
index 0000000000..e29d893382
--- /dev/null
+++ b/files/ko/web/css/@viewport/viewport-fit/index.html
@@ -0,0 +1,72 @@
+---
+title: viewport-fit
+slug: Web/CSS/@viewport/viewport-fit
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css; no-line-numbers">/* Keyword values */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.</dd>
+ <dt><code>contain</code></dt>
+ <dd>뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>cover</code></dt>
+ <dd>뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용할 것을 권장합니다.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">auto | contain | cover
+</pre>
+
+<div class="hidden">이 설명자는 아직 <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a>에 등재되지 않았습니다.</div>
+
+<h2 id="접근성_문제">접근성 문제</h2>
+
+<p><code>viewport-fit</code> 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용해야 함을 기억하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
diff --git a/files/ko/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html
new file mode 100644
index 0000000000..137b2eb6a9
--- /dev/null
+++ b/files/ko/web/css/@viewport/zoom/index.html
@@ -0,0 +1,70 @@
+---
+title: zoom
+slug: Web/CSS/@viewport/zoom
+tags:
+  - CSS
+  - CSS Descriptor
+  - Graphics
+  - Layout
+  - NeedsExample
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<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>