path: root/files/ko/web/guide/css/media_queries/index.html

---
title: 미디어 쿼리 사용하기
slug: Web/Guide/CSS/Media_queries
tags:
  - Advanced
  - CSS
  - Guide
  - Media
  - Media Queries
  - Responsive Design
  - Web
translation_of: Web/CSS/Media_Queries/Using_media_queries
---
<div>{{cssref}}</div>

<p><strong>미디어 쿼리</strong>는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.</p>

<p>미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.</p>

<ul>
 <li><a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("@media")}}와 {{cssxref("@import")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해 특정 조건에 따라 스타일을 적용할 때.</li>
 <li>{{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 <a href="/ko/docs/Web/HTML">HTML</a> 요소에 <code>media</code> 특성을 사용해 특정 매체만 가리키게 할 때.</li>
 <li>{{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메서드를 사용해 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">미디어 상태를 판별하고 관측</a>할 때.</li>
</ul>

<div class="note">
<p><strong>참고:</strong> 이 페이지의 CSS는 시연용으로 <code>@media</code>를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.</p>
</div>

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

<p>미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.</p>

<p>미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.</p>

<div class="blockIndicator note">
<p><strong>참고:</strong> {{HTMLElement("link")}}의 미디어 쿼리가 <a href="http://scottjehl.github.com/CSS-Download-Tests/">거짓을 반환하더라도 스타일시트는 다운로드</a>됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.</p>
</div>

<h3 id="미디어_유형">미디어 유형</h3>

<p>미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 <code>not</code>이나 <code>only</code> 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 <code>all</code>을 사용합니다.</p>

<dl>
 <dt><code><strong>all</strong></code></dt>
 <dd>모든 장치에 적합합니다.</dd>
 <dt><code>print</code></dt>
 <dd>인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.<br>
 (<a href="/ko/docs/Web/CSS/Paged_Media">인쇄 미디어</a> 문서를 방문해 <code>print</code> 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)</dd>
 <dt><code>screen</code></dt>
 <dd>주로 화면이 대상입니다.</dd>
 <dt><code>speech</code></dt>
 <dd>음성 합성장치 대상입니다.</dd>
</dl>

<div class="blockIndicator note">
<p><strong>사용하지 않는 미디어 유형:</strong> CSS2.1과 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 모듈은 여러가지 추가 유형(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>)을 정의했으나 <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>에서 제거됐으므로 사용해선 안됩니다. <code>aural</code>은 유사한 유형인 <code>speech</code>로 대체됐습니다.</p>
</div>

<h3 id="미디어_특성">미디어 특성</h3>

<p>미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.</p>

<table>
 <thead>
  <tr>
   <th>이름</th>
   <th>요약</th>
   <th>참고</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{cssxref("@media/any-hover", "any-hover")}}</td>
   <td>사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td>
   <td>사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td>
   <td>뷰포트의 가로세로비</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/color", "color")}}</td>
   <td>출력 장치의 색상 채널별 비트 수, 흑백일 땐 0</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td>
   <td>사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/color-index", "color-index")}}</td>
   <td>출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td>
   <td>출력 장치의 가로세로비</td>
   <td>Media Queries Level 4에서 제거</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td>
   <td>출력 장치 렌더링 표면의 높이</td>
   <td>Media Queries Level 4에서 제거</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td>
   <td>출력 장치 렌더링 표면의 너비</td>
   <td>Media Queries Level 4에서 제거</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/display-mode", "display-mode")}}</td>
   <td>웹 앱 매니페스트의 <code><a href="/ko/docs/Web/Manifest#display">display</a></code> 항목이 정의한 애플리케이션의 표시 모드</td>
   <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 명세</a>에서 정의</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
   <td>사용자 에이전트가 색상 팔레트를 제한하는지 여부</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/grid", "grid")}}</td>
   <td>장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/height", "height")}}</td>
   <td>뷰포트의 높이</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/hover", "hover")}}</td>
   <td>주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?</td>
   <td>Media Queries Level 4에서 제거</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td>
   <td>사용자 에이전트나 운영 체제가 색상을 반전 중인가?</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/light-level", "light-level")}}</td>
   <td>주변 환경의 광도</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/monochrome", "monochrome")}}</td>
   <td>출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/orientation", "orientation")}}</td>
   <td>뷰포트의 방향</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td>
   <td>콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td>
   <td>콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/pointer", "pointer")}}</td>
   <td>주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
   <td>라이트/다크 색채 조합 중 사용자가 선호하는 것</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
   <td>사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
   <td>사용자가 줄어든 움직임을 선호함</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
   <td>사용자가 줄어든 투명도를 선호함.</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/resolution", "resolution")}}</td>
   <td>출력 장치의 픽셀 밀도</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/scan", "scan")}}</td>
   <td>출력 장치의 스캔 절차</td>
   <td></td>
  </tr>
  <tr>
   <td>{{cssxref("@media/scripting", "scripting")}}</td>
   <td>JavaScript 등 스크립트 사용 가능 여부 탐지</td>
   <td>Media Queries Level 5에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/update-frequency", "update")}}</td>
   <td>출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기</td>
   <td>Media Queries Level 4에서 추가</td>
  </tr>
  <tr>
   <td>{{cssxref("@media/width", "width")}}</td>
   <td>스크롤바를 포함한 뷰포트 너비</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h3 id="논리_연산자">논리 연산자</h3>

<p><code>not</code>, <code>and<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>only</code>와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.</p>

<h4 id="and"><code>and</code></h4>

<p><code>and</code> 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.</p>

<h4 id="not"><code>not</code></h4>

<p><code>not</code> 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. <code>not</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p>

<div class="blockIndicator note">
<p><strong>참고:</strong> Level 3 모듈에서는 <code>not</code> 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.</p>
</div>

<h4 id="only"><code>only</code></h4>

<p><code>only</code> 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. <code>only</code>를 사용하지 않은 <code>screen and (max-width: 500px)</code> 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 <code>screen</code>으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. <code>only</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p>

<h4 id="쉼표"><code>,</code> (쉼표)</h4>

<p>쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 <code>or</code> 연산자처럼 동작합니다.</p>

<h2 id="미디어_유형_특정하기">미디어 유형 특정하기</h2>

<p>미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.</p>

<pre class="brush: css notranslate">@media print { ... }</pre>

<p>다수의 장치를 특정할 수도 있습니다. 예컨대 아래 <code>@media</code> 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.</p>

<pre class="brush: css notranslate">@media screen, print { ... }</pre>

<p><a href="#미디어_유형">미디어 유형</a> 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.</p>

<h2 id="미디어_기능_특정하기">미디어 기능 특정하기</h2>

<p>미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.</p>

<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre>

<p>많은 미디어 기능은 <u>범위 기능</u>으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.</p>

<pre class="brush: css notranslate">@media (max-width: 12450px) { ... }</pre>

<p>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.</p>

<pre class="brush: css notranslate">@media (color) { ... }</pre>

<p>어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.</p>

<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre>

<p><a href="#미디어_특성">미디어 특성</a> 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.</p>

<h2 id="복잡한_미디어_쿼리_생성">복잡한 미디어 쿼리 생성</h2>

<p>때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : <code>not</code>, <code>and</code>, 그리고 <code>only</code>를 사용하면 됩니다.  더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.</p>

<p>앞서 예와 같이,  <code>and</code> 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 <code>and</code> 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 <code>not</code> 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. <code>only</code> 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.</p>

<div class="note">
<p><strong>Note:</strong> 대부분의 경우,  <code>all</code> 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 <code>not</code> 이나 <code>only</code> 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.</p>
</div>

<h3 id="다수의_유형과_기능_조합하기">다수의 유형과 기능 조합하기</h3>

<p>The <code>and</code> 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:</p>

<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>

<p>화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 <code>screen</code> 미디어유형에 미디어기능을 연결합니다:</p>

<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>

<h3 id="다수의_쿼리_판별">다수의 쿼리 판별</h3>

<p>쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:</p>

<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>

<p>위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.</p>

<h3 id="쿼리의_뜻_반전하기">쿼리의 뜻 반전하기</h3>

<p><code>not</code> 키워드는 미디어쿼리 전체의 의미를 반전시킵니다.  이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) <code>not</code> 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다.  <code>not</code> 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:</p>

<pre class="brush: css notranslate">@media not all and (monochrome) { ... }
</pre>

<p>... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:</p>

<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... }
</pre>

<p>... 다음과 같이 되는 것이 아닙니다:</p>

<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre>

<p>다른 예를 보자면, 다음의 미디어 쿼리는:</p>

<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... }
</pre>

<p>... 이렇게 평가됩니다:</p>

<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre>

<h3 id="구형_브라우저와의_호환성_향상하기">구형 브라우저와의 호환성 향상하기</h3>

<p><code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. <em>신형브라우저에는 아무런 영향을 주지 않습니다.</em></p>

<pre class="brush: css notranslate">@media only screen and (color) { ... }
</pre>

<h2 id="Level_4의_구문_향상">Level 4의 구문 향상</h2>

<p>미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a <em>range context</em> for writing such queries. 폭을 표현하기 위해 <code>max-</code> 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:</p>

<div class="note">
<p><strong>Note:</strong> 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만,  몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a> 를 참조해 주십시요. </p>
</div>

<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre>

<p>미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:</p>

<pre class="brush: css notranslate">@media (width &lt;= 30em) { ... }</pre>

<p><code>min-</code> 과 <code>max-</code> 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:</p>

<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>

<p>Level 4 구문에서는 이렇게 표현할 수 있습니다:</p>

<pre class="brush: css notranslate">@media (30em &lt;= width &lt;= 50em ) { ... }
</pre>

<p> Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 <strong>and</strong>, <strong>not</strong>, <strong>or</strong>.연산자를 결합할 수 있습니다. </p>

<h3 id="not으로_기능_부정"><code>not</code>으로 기능 부정</h3>

<p>미디어기능에 <code>not()</code> 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 <code>not(hover)</code> 를 사용할 수 있습니다.</p>

<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre>

<h3 id="or로_다수의_기능_판별"><code>or</code>로 다수의 기능 판별</h3>

<p><code>or</code> 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 <code>true</code> 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.</p>

<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... }
</pre>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍으로 미디어 쿼리 판별하기</a></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>