---
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>

{{csssyntax}}

<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>