1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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("<length>")}} 자리에는 <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 > 600px) {
body { line-height: 1.4; }
}
@media (400px <= width <= 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>
|
