initial commit

2 files changed, 196 insertions, 0 deletions

diff --git a/files/ko/web/css/media_queries/index.html b/files/ko/web/css/media_queries/index.html
new file mode 100644
index 0000000000..c3f4e87226
--- /dev/null
+++ b/files/ko/web/css/media_queries/index.html
@@ -0,0 +1,103 @@
+---
+title: 미디어 쿼리
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - CSS 미디어 쿼리
+  - Media Queries
+  - Overview
+  - Reference
+  - 미디어 쿼리
+  - 반응형 디자인
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>미디어 쿼리</strong>는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.</p>
+
+<p>미디어 쿼리는 <a href="/ko/docs/Web/Progressive_web_apps">반응형 디자인</a>의 핵심 구성 요소입니다. 예를 들어, 미디어 쿼리는 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드(portrait mode)일 때 단락의 패딩 값을 증가시킬 수도 있습니다. 혹은 터치 스크린에서 버튼 사이즈를 키울 수도 있습니다.</p>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a>에서는 {{cssxref("@media")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해서 스타일 시트의 일부를 조건부로 적용합니다. 이 스타일 시트는 미디어 쿼리의 결과에 기반한 스타일 시트입니다. {{cssxref("@import")}}를 사용해서 조건부로 전체 스타일시트를 적용해보세요.</p>
+
+<h3 id="HTML에서의_미디어_쿼리">HTML에서의 미디어 쿼리</h3>
+
+<p><a href="/ko/docs/Web/HTML">HTML</a>에서 미디어 쿼리는 다양한 요소에 적용될 수 있습니다.:</p>
+
+<ul>
+ <li>{{HTMLElement("link")}} 요소의 {{htmlattrxref("media", "link")}} 속성에서는, 링크된 리소스 (일반적으로 CSS)가 적용되어야하는 미디어를 정의합니다.</li>
+ <li>{{HTMLElement("source")}} 요소의 {{htmlattrxref("media", "source")}} 속성에서는, 해당 소스가 적용되어야하는 미디어를 정의합니다. (이건 {{HTMLElement("picture")}} 요소 안에서만 유효합니다.)</li>
+ <li>{{HTMLElement("style")}} 요소의 {{htmlattrxref("media", "style")}} 속성에서는, 스타일이 적용되어야하는 미디어를 정의합니다.</li>
+</ul>
+
+<h3 id="JavaScript에서의_미디어_쿼리">JavaScript에서의 미디어 쿼리</h3>
+
+<p><a href="/ko/docs/Web/JavaScript">JavaScript</a>에서는, {{domxref("Window.matchMedia()")}} 메소드로 미디어 쿼리를 테스트할 수 있습니다. {{domxref("MediaQueryList.addListener()")}} 메소드를 사용하면 쿼리가 변경될 때마다 사이트나 앱에서 알림을 받을 수도 있습니다. 이러한 기능을 사용하면, 사이트나 앱이 기기 구성, 방향 또는 상태의 변화에 따라 응답할 수도 있습니다.</p>
+
+<p><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>에서 프로그래밍 방식으로 미디어 쿼리를 사용하는 방법에 대해 자세히 배워보세요.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a></dt>
+ <dd>미디어 쿼리 표현식을 구성하는데 사용되는 미디어 쿼리, 구문 및 연산자와 미디어 기능을 소개합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍 방식으로 미디어 쿼리 테스트하기</a></dt>
+ <dd>자바스크립트 코드에서 어떻게 미디어 쿼리를 사용해 디바이스의 상태를 확인하는지, 그리고 미디어 쿼리가 변경될 때(사용자가 화면을 회전시키거나 브라우저를 리사이즈 할 때와 같은 상황)마다 알림을 보내기 위해 어떻게 리스너를 설정하는지에 대해 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">접근성을 위한 미디어 쿼리</a></dt>
+ <dd>미디어 쿼리를 사용해 사용자가 웹사이트를 더 잘 이해할 수 있게 만들어보세요.</dd>
+</dl>
+
+<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('CSS5 Media Queries')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("@supports")}} 를 사용하면 브라우저가 지원하는 다양한 CSS 기술들에 대한 스타일을 적용할 수 있습니다.</li>
+</ul>
diff --git a/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html
new file mode 100644
index 0000000000..d48d431b7d
--- /dev/null
+++ b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html
@@ -0,0 +1,93 @@
+---
+title: 접근성을 위한 미디어 쿼리 사용하기
+slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+tags:
+  - '@media'
+  - CSS
+  - 미디어 속성
+  - 접근성
+translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+---
+<p><strong>미디어쿼리(Media Queries)</strong>는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.</p>
+
+<h2 id="애니메이션_동작_축소하기(Reduced_Motion)">애니메이션 동작 축소하기(Reduced Motion)</h2>
+
+<p>깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(注意力缺乏過剩行動症候群 : ADHD)와 같은 인식장애를 가진 사람들에게 문제가 될 수 있다. 이러한 종류의 애니메이션 동작들은 시력 장애, 간질이나 편두통과 암소시성 민감증을 유발할 수 있습니다.</p>
+
+<p>또한, 이 애니메이션 동작을 줄이는.방법을 통해 배터리가 부족한 사람이나 보급형 스마트폰 및 컴퓨터를 사용하는 사람들에게 도음을 줄 수 있습니다.</p>
+
+<h3 id="문법"><strong>문법</strong></h3>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않았을 경우에 적용될 스타일을 나타냅니다.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하였을 경우에 적용될 스타일을 나타냅니다.</dd>
+</dl>
+
+<h3 id="예제"><strong>예제</strong></h3>
+
+<p>이 예시는 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않으면 애니메이션 효과가 축소되지 않습니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+</pre>
+
+<h2 id="고대비_모드_(High_Contrast_Mode)">고대비 모드 (High Contrast Mode)</h2>
+
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong>-ms-high-contrast</strong> <a href="/en-US/docs/Web/CSS">CSS media 속성</a>은 애플리케이션이 고대비 모드로 표시되고 있는지의 여부에따라 어떤 색상으로 웹사이트를 표시할 지를 정의하는 <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft 확장기능</a>입니다.</p>
+
+<p> 이 미디어 속성은 저시력 사용자나 대비에 민감한 문제가 있는 사람뿐만 아니라 직사광선 아래에서 컴퓨터나 휴대폰을 사용하는 사람에게도 도움이 됩니다.</p>
+
+<h3 id="문법_2"><strong>문법</strong></h3>
+
+<p><strong><code>-ms-high-contrast</code></strong> 미디어 속성(Media Feature)은 다음 값 중 하나를 지정하여 사용할 수 있습니다.</p>
+
+<h3 id="속성값"><strong>속성값</strong></h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>시스템이 색상과 관계없이 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p>
+ </dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>시스템이 검은색-흰 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>시스템이 흰 색-검은 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p>
+ </dd>
+</dl>
+
+<h3 id="예제_2"><strong>예제</strong></h3>
+
+<p>다음 선언된 스타일들은 시스템과 애플리케이션에서 고대비 모드의 색상 변화에 따라 스타일을 일치시켜줍니다.</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* 모든 고대비 모드에 대한 스타일 규칙입니다 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>