initial commit

2 files changed, 242 insertions, 0 deletions

diff --git a/files/ko/web/css/@media/index.html b/files/ko/web/css/@media/index.html
new file mode 100644
index 0000000000..6c06996035
--- /dev/null
+++ b/files/ko/web/css/@media/index.html
@@ -0,0 +1,153 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - '@media'
+  - At-rule
+  - CSS
+  - Reference
+  - 미디어 쿼리
+translation_of: Web/CSS/@media
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@media</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="at-rule">@규칙</a>은 스타일 시트의 일부를 하나 이상의 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a> 결과에 따라 적용할 때 사용할 수 있습니다.</span> <code>@media</code>를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> JavaScript에서는 <code>@media</code>를 {{domxref("CSSMediaRule")}} CSS 객체 모델 인터페이스로 접근할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p><code>@media</code> @규칙은 최상위 코드나, 아무 <a href="/ko/docs/Web/CSS/At-rule#조건부_그룹_규칙">조건부 그룹 @규칙</a> 안에 중첩해 작성할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">/* 최상위 코드 레벨 */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* 다른 조건부 @규칙 내에 중첩 */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+</pre>
+
+<p>미디어 쿼리 구문에 관한 내용은 <a href="/ko/docs/Web/Guide/CSS/Media_queries#구문">미디어 쿼리 사용하기</a> 문서를 참고하세요.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 {{cssxref("&lt;length&gt;")}} 자리에는 <code><a href="/ko/docs/Web/CSS/length#em">em</a></code>을 사용하는게 좋습니다.</p>
+
+<p><code>em</code>과 <code><a href="/ko/docs/Web/CSS/length#px">px</a></code> 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 <code>em</code>이 더 자연스럽게 동작합니다.</p>
+
+<p>Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 <code>prefers-reduced-motion</code> 쿼리를 사용하면 <a href="/ko/docs/Web/CSS/@media/prefers-reduced-motion">사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다</a>.</p>
+
+<h2 id="Examples" name="Examples">보안</h2>
+
+<p>미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.</p>
+
+<p>그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.</p>
+
+<h2 id="Examples" name="Examples">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="출력과_화면_미디어_타입_판별">출력과 화면 미디어 타입 판별</h3>
+
+<pre class="brush: css notranslate">@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}</pre>
+
+<p>Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">@media (height &gt; 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px &lt;= width &lt;= 700px) {
+    body { line-height: 1.4; }
+}</pre>
+
+<p>더 많은 예제는 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a>를 참고하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
+   <td>Reinstates <code>light-level</code>, <code>inverted-colors</code> and Custom Media Queries, which were removed from Level 4.<br>
+    Adds <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, and <code>prefers-color-scheme</code> media features.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>
+    <p>Adds <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
+     Makes the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
+   </td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>Initial definition.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a></li>
+ <li>JavaScript에서 <code>@media</code>에 접근할 때 사용할 수 있는 CSS 객체 모델 인터페이스 {{domxref("CSSMediaRule")}}</li>
+ <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 특성 확장</a></li>
+ <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 특성 확장</a></li>
+</ul>
diff --git a/files/ko/web/css/@media/prefers-color-scheme/index.html b/files/ko/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..1ce1a10a2b
--- /dev/null
+++ b/files/ko/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,89 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - Web
+  - prefers-color-scheme
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<p><strong><code>prefers-color-scheme</code></strong> <a href="/ko/docs/CSS">CSS</a> <a href="/ko/docs/Web/CSS/@media#Media_features">미디어 특성</a>은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a>에서 <code>false</code>로 판정됩니다.</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>사용자가 시스템에 라이트 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 검은 배경에 흰 텍스트를 가진 요소를 라이트 테마를 사용하는 사용자가 볼 경우 색을 반대로 해서 나타냅니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="themed"&gt;Theme&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.themed {
+  display: block;
+  width: 10em;
+  height: 10em;
+  background: black;
+  color: white;
+}
+
+@media (prefers-color-scheme: light) {
+  .themed {
+    background: white;
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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>
+    <p>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</p>
+   </td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>