# 미디어 쿼리 사용하기
**미디어 쿼리(Media queries)**를 사용하면 디바이스의 미디어 타입(예: 인쇄 vs. 화면)이나 화면 해상도나 방향, [종횡비(aspect ratio)](https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio), 브라우저 [뷰포트(viewport)](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) 너비나 높이, 사용자 환경설정(예: 모션 감소, 데이터 사용량, 투명도 선호) 같은 특성이나 특징에 따라 CSS 스타일을 적용할 수 있어요.
미디어 쿼리는 다음과 같은 용도로 사용돼요:
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)의 [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media), [@custom-media](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@custom-media), [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@import) [at-규칙](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Syntax/At-rules)을 사용해서 조건부로 스타일을 적용하기 위해.
- [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link), [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) 및 기타 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 요소들의 `media=` 또는 `sizes=` 속성으로 특정 미디어를 타겟팅하기 위해.
- [Window.matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)와 [EventTarget.addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 메서드를 사용해서 [미디어 상태를 테스트하고 모니터링](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Testing)하기 위해.
**참고:**
이 페이지의 예제들은 설명을 위해 CSS의 `@media`를 사용하지만, 기본 문법은 모든 타입의 미디어 쿼리에서 동일해요.
## 이 문서의 내용
- [문법](#syntax)
- [미디어 타입 타겟팅하기](#targeting_media_types)
- [미디어 기능 타겟팅하기](#targeting_media_features)
- [복잡한 미디어 쿼리 만들기](#creating_complex_media_queries)
- [같이 보기](#see_also)
## 문법
미디어 쿼리는 선택적인 *미디어 타입*과 원하는 개수만큼의 *미디어 기능* 표현식으로 구성되며, 이들은 *논리 연산자*를 사용해서 다양한 방식으로 선택적으로 결합될 수 있어요.
미디어 쿼리는 대소문자를 구분하지 않아요.
- [미디어 타입](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media#media_types)은 미디어 쿼리가 적용되는 디바이스의 광범위한 카테고리를 정의해요: `all`, `print`, `screen`.
타입은 선택사항이지만(`all`로 가정됨) `only` 논리 연산자를 사용할 때는 예외예요.
- [미디어 기능](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media#media_features)은 [사용자 에이전트](https://developer.mozilla.org/en-US/docs/Glossary/User_agent), 출력 디바이스 또는 환경의 특정 특성을 설명해요:
- [`any-hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/any-hover)
- [`any-pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/any-pointer)
- [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/aspect-ratio)
- [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color)
- [`color-gamut`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut)
- [`color-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color-index)
- [`device-aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/device-aspect-ratio) <abbr class="icon icon-deprecated" title="더 이상 사용되지 않음. 새 웹사이트에서 사용하지 마세요."><span class="visually-hidden">더 이상 사용되지 않음</span></abbr>
- [`device-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/device-height) <abbr class="icon icon-deprecated" title="더 이상 사용되지 않음. 새 웹사이트에서 사용하지 마세요."><span class="visually-hidden">더 이상 사용되지 않음</span></abbr>
- [`device-posture`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/device-posture)
- [`device-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/device-width) <abbr class="icon icon-deprecated" title="더 이상 사용되지 않음. 새 웹사이트에서 사용하지 마세요."><span class="visually-hidden">더 이상 사용되지 않음</span></abbr>
- [`display-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/display-mode)
- [`dynamic-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/dynamic-range)
- [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors)
- [`grid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/grid)
- [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/height)
- [`hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/hover)
- [`inverted-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/inverted-colors)
- [`monochrome`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/monochrome)
- [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/orientation)
- [`overflow-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/overflow-block)
- [`overflow-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/overflow-inline)
- [`pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer)
- [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)
- [`prefers-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-contrast)
- [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)
- [`prefers-reduced-transparency`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency)
- [`resolution`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/resolution)
- [`scripting`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/scripting)
- [`update`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/update)
- [`video-dynamic-range`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/video-dynamic-range)
- [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/width)
예를 들어, [`hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/hover) 기능을 사용하면 디바이스가 요소 위에 호버하는 것을 지원하는지 확인하는 쿼리를 만들 수 있어요.
미디어 기능 표현식은 그것들의 존재나 값을 테스트하며, 완전히 선택사항이에요.
각 미디어 기능 표현식은 괄호로 둘러싸여 있어야 해요.
- [논리 연산자](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media#logical_operators)를 사용해서 복잡한 미디어 쿼리를 작성할 수 있어요: `not`, `and`, `only`.
또한 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 결합할 수도 있어요.
미디어 쿼리는 (지정된 경우) 미디어 타입이 문서가 표시되는 디바이스와 일치하고 *그리고* 모든 미디어 기능 표현식이 true로 계산될 때 `true`로 계산돼요.
알 수 없는 미디어 타입과 관련된 쿼리는 항상 false예요.
**참고:**
[`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link) 태그에 미디어 쿼리가 첨부된 스타일시트는 쿼리가 `false`를 반환하더라도 [여전히 다운로드될 거예요](https://scottjehl.github.io/CSS-Download-Tests/). 다운로드는 발생하지만 다운로드 우선순위는 훨씬 낮아져요.
그럼에도 불구하고, 쿼리 결과가 `true`로 변경되지 않는 한 그 내용은 적용되지 않아요.
왜 이런 일이 발생하는지는 Tomayac의 블로그 [왜 브라우저는 일치하지 않는 미디어 쿼리가 있는 스타일시트를 다운로드하나요](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2)에서 읽을 수 있어요.
**💡 강사 팁:** 미디어 쿼리가 false여도 스타일시트가 다운로드된다는 점은 성능 최적화할 때 주의해야 할 부분이에요. 불필요한 CSS 파일이 로드되지 않도록 프로젝트 구조를 잘 설계하는 게 중요해요. 예를 들어, 인쇄용 스타일은 별도 파일로 분리하고 필요할 때만 동적으로 로드하는 방식도 고려해볼 만해요.
## 미디어 타입 타겟팅하기
미디어 타입은 주어진 디바이스의 일반적인 카테고리를 설명해요.
웹사이트는 일반적으로 화면을 염두에 두고 디자인되지만, 프린터나 오디오 기반 스크린 리더와 같은 특수 디바이스를 타겟으로 하는 스타일을 만들고 싶을 수도 있어요.
예를 들어, 이 CSS는 프린터를 타겟으로 해요:
```css
@media print {
/* … */
}
```
여러 디바이스를 타겟으로 할 수도 있어요.
예를 들어, 이 `@media` 규칙은 두 개의 미디어 쿼리를 사용해서 화면과 인쇄 디바이스 모두를 타겟으로 해요:
```css
@media screen, print {
/* … */
}
```
사용 가능한 미디어 타입 목록은 [미디어 타입](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media#media_types)을 참고하세요.
미디어 타입은 디바이스를 매우 광범위한 용어로 설명하기 때문에, 원래 정의된 대부분의 미디어 타입은 더 이상 사용되지 않으며(deprecated), `screen`, `print`, `all`만 남아있어요. 더 구체적인 속성을 타겟팅하려면 대신 *미디어 기능*을 사용하세요.
**💡 강사 팁:** 실무에서는 `screen`과 `print`만 주로 사용해요. 인쇄용 스타일은 생각보다 중요한데요, 사용자가 페이지를 PDF로 저장하거나 인쇄할 때 깔끔하게 나오도록 하면 사용자 경험이 훨씬 좋아져요. 특히 기사나 문서 사이트에서는 인쇄용 최적화가 필수예요!
## 미디어 기능 타겟팅하기
미디어 기능은 주어진 [사용자 에이전트](https://developer.mozilla.org/en-US/docs/Glossary/User_agent), 출력 디바이스 또는 환경의 특정 특성을 설명해요.
예를 들어, 와이드스크린 모니터, 마우스를 사용하는 컴퓨터, 또는 저조도 환경에서 사용 중인 디바이스에 특정 스타일을 적용할 수 있어요.
이 예제는 사용자의 *주(primary)* 입력 메커니즘(예: 마우스)이 요소 위에 호버할 수 있을 때 스타일을 적용해요:
```css
@media (hover: hover) {
/* … */
}
```
미디어 기능은 범위형(range) 또는 이산형(discrete)이에요.
*이산형 기능*은 [열거된(enumerated)](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated) 가능한 키워드 값 집합에서 값을 가져와요. 예를 들어, 이산형 `orientation` 기능은 `landscape` 또는 `portrait` 중 하나를 받아요.
```css
@media print and (orientation: portrait) {
/* … */
}
```
많은 *범위형 기능*에는 "최소 조건" 또는 "최대 조건" 제약을 표현하기 위해 "min-" 또는 "max-" 접두사를 붙일 수 있어요.
예를 들어, 이 CSS는 브라우저의 [뷰포트](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) 너비가 1250px와 같거나 더 좁을 때만 스타일을 적용해요:
```css
@media (max-width: 1250px) {
/* … */
}
```
다음 미디어 쿼리들은 위 예제와 동일해요:
```css
@media (width <= 1250px) {
/* … */
}
@media (1250px >= width) {
/* … */
}
```
미디어 쿼리 범위 기능을 사용할 때, 포함형(inclusive) `min-`과 `max-` 접두사 또는 더 간결한 범위 구문 연산자 `<=`와 `>=`를 사용할 수 있어요.
다음 미디어 쿼리들은 동일해요:
```css
@media (min-width: 30em) and (max-width: 50em) {
/* … */
}
@media (30em <= width <= 50em) {
/* … */
}
@media (50em >= width >= 30em) {
/* … */
}
```
위의 범위 비교는 포함형이에요. 비교 값을 제외하려면 `<`와/또는 `>`를 사용하세요.
```css
@media (30em < width < 50em) {
/* … */
}
@media (50em > width > 30em) {
/* … */
}
```
값을 지정하지 않고 미디어 기능 쿼리를 만들면, 기능의 값이 `0`이나 `none`이 아닌 한 중첩된 스타일이 사용될 거예요.
예를 들어, 이 CSS는 컬러 스크린이 있는 모든 디바이스에 적용돼요:
```css
@media (color) {
/* … */
}
```
기능이 브라우저가 실행 중인 디바이스에 적용되지 않으면, 해당 미디어 기능과 관련된 표현식은 항상 false예요.
더 많은 [미디어 기능](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media#media_features) 예제는 각 특정 기능의 참조 페이지를 확인하세요.
**💡 강사 팁:** 범위 구문(`<=`, `>=`)은 비교적 최신 문법이라 아직 익숙하지 않을 수 있지만, 가독성이 훨씬 좋아요. 특히 복잡한 범위 조건을 작성할 때 실수를 줄일 수 있어서 적극 추천해요. 다만 프로젝트의 브라우저 지원 범위를 확인하고 사용하세요!
## 복잡한 미디어 쿼리 만들기
때때로 여러 조건에 따라 미디어 쿼리를 만들고 싶을 수 있어요. 이때 *논리 연산자*가 등장해요: `not`, `and`, `only`.
게다가, 여러 미디어 쿼리를 쉼표로 구분된 목록으로 결합할 수 있어요. 이렇게 하면 다른 상황에서 동일한 스타일을 적용할 수 있으며, 포함된 미디어 쿼리들은 논리적 `or` 조합으로 평가돼요: 각 미디어 쿼리가 괄호 안에 있고 그들 사이에 `or`가 있는 것처럼 해석돼요.
이전 예제에서 미디어 *타입*과 미디어 *기능*을 그룹화하는 데 사용된 `and` 연산자를 봤어요.
`and` 연산자는 또한 단일 미디어 쿼리 내에서 여러 미디어 기능을 결합할 수도 있어요.
`not` 연산자는 미디어 쿼리 또는 괄호와 함께 사용될 때 미디어 기능을 부정하여, 기본적으로 정상적인 의미를 반전시켜요.
`or` 연산자는 특정 조건 하에서 단일 미디어 쿼리 내에서 여러 미디어 기능을 결합하는 데 사용될 수 있어요.
마지막으로, `only` 연산자는 미디어 기능 표현식을 평가하지 않고 구형 브라우저가 스타일을 적용하는 것을 방지하는 데 사용되었지만, 현대 브라우저에서는 효과가 없어요.
**참고:**
대부분의 경우, 다른 타입이 지정되지 않으면 `all` 미디어 타입이 기본적으로 사용돼요.
하지만 `only` 연산자를 사용하면 미디어 타입을 명시적으로 지정해야 해요. `only screen` 또는 `only print`를 전체로 볼 수 있어요.
### 여러 타입이나 기능 결합하기
`and` 키워드는 미디어 기능과 미디어 타입 *또는* 다른 미디어 기능들을 결합해요.
이 예제는 두 개의 미디어 기능을 결합해서 스타일을 최소 30em 너비를 가진 가로 방향 디바이스로 제한해요:
```css
@media (width >= 30em) and (orientation: landscape) {
/* … */
}
```
화면이 있는 디바이스로 스타일을 제한하려면, 미디어 기능들을 `screen` 미디어 타입에 연결할 수 있어요:
```css
@media screen and (width >= 30em) and (orientation: landscape) {
/* … */
}
```
**💡 강사 팁:** `and`를 사용한 조건 결합은 반응형 디자인의 핵심이에요. 실무에서는 주로 화면 크기와 방향을 함께 고려해서 태블릿의 가로/세로 모드에 따라 다른 레이아웃을 제공하곤 해요. 모바일 퍼스트 접근 방식을 사용하면 코드가 더 깔끔해져요!
### 여러 쿼리 테스트하기
쉼표로 구분된 미디어 쿼리 목록을 사용해서 사용자의 디바이스가 다양한 미디어 타입, 기능 또는 상태 중 하나라도 일치할 때 스타일을 적용할 수 있어요.
다음 규칙은 두 개의 미디어 쿼리를 포함해요. 블록의 스타일은 사용자의 디바이스가 680px 이상의 높이를 가지고 있거나 *또는* 브라우저 뷰포트가 세로 모드(뷰포트 높이가 뷰포트 너비보다 큰 경우)인 경우 적용될 거예요:
```css
@media (height >= 680px), screen and (orientation: portrait) {
/* … */
}
```
이 예제에서, 사용자가 PDF로 인쇄 중이고 페이지 높이가 800px라면, 미디어 쿼리는 true를 반환해요. 왜냐하면 첫 번째 쿼리 구성요소 — 뷰포트가 `680px` 이상의 높이를 가지는지 테스트하는 것 —가 true이기 때문이에요.
마찬가지로, 사용자가 뷰포트 높이가 480px인 스마트폰에서 세로 모드에 있다면, 미디어 쿼리는 true를 반환해요. 왜냐하면 두 번째 쿼리 구성요소가 true이기 때문이에요.
쉼표로 구분된 미디어 쿼리 목록에서, 개별 미디어 쿼리는 쉼표에서 끝나거나, 목록의 마지막 미디어 쿼리의 경우 여는 중괄호(`{`)에서 끝나요.
**💡 강사 팁:** 쉼표로 구분된 미디어 쿼리는 `OR` 조건이라고 생각하면 돼요. 반응형 디자인에서 특정 조건 중 하나라도 만족하면 스타일을 적용하고 싶을 때 정말 유용해요. 예를 들어 "큰 화면이거나 가로 모드일 때"라는 조건을 쉽게 표현할 수 있죠.
### 쿼리의 의미 반전하기
`not` 키워드는 단일 미디어 쿼리의 의미를 반전시켜요. 예를 들어, 이 미디어 쿼리의 CSS 스타일은 인쇄 미디어를 *제외한* 모든 것에 적용될 거예요:
```css
@media not print {
/* … */
}
```
`not`은 그것이 적용된 미디어 쿼리만 부정해요. 괄호 없는 `not`은 포함된 미디어 쿼리 내의 모든 기능을 부정해요. 즉, 쉼표로 구분된 미디어 쿼리 목록에서, 각 `not`은 그것이 포함된 단일 쿼리에만 적용되며, 해당 단일 쿼리 내의 *모든* 기능에 적용돼요. 이 예제에서 `not`은 첫 번째 쉼표에서 끝나는 첫 번째 미디어 쿼리 `screen and (color)`에 적용돼요:
```css
@media not screen and (color), print and (color) {
/* … */
}
```
쿼리가 미디어 타입 `screen`으로 시작하기 때문에, `screen and (color)`를 괄호로 감쌀 수 *없어요*. 반면에, 미디어 쿼리가 기능만으로 구성되어 있다면, 쿼리를 괄호로 감싸야 *해요*:
```css
@media not ((width > 1000px) and (color)), print and (color) {
/* … */
}
```
괄호는 부정되는 쿼리의 구성요소를 제한해요. 예를 들어, `(width > 1000px)` 쿼리만 부정하려면:
```css
@media (not (width > 1000px)) and (color), print and (color) {
/* … */
}
```
`not`은 오른쪽 쿼리만 부정해요. 이 예제에서, 우리는 `hover` 미디어 기능을 부정하지만 `screen` 미디어 타입은 부정하지 않아요:
```css
@media screen and not (hover) {
/* … */
}
```
`not (hover)`는 디바이스가 호버 기능이 없을 때 일치해요. 이 경우, 순서 때문에 `not`은 `hover`에 적용되지만 `screen`에는 적용되지 않아요.
**💡 강사 팁:** `not` 연산자는 처음에는 헷갈릴 수 있어요. 핵심은 `not`이 어디까지 적용되는지 정확히 파악하는 거예요. 실무에서는 괄호를 명시적으로 사용해서 의도를 명확하게 하는 게 디버깅할 때 훨씬 도움이 돼요. 특히 팀 프로젝트에서는 코드 가독성이 정말 중요하거든요!
### 구형 브라우저와의 호환성 개선하기
`only` 키워드는 미디어 기능이 있는 미디어 쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하는 것을 방지해요.
*현대 브라우저에서는 효과가 없어요.*
```css
@media only screen and (color) {
/* … */
}
```
**💡 강사 팁:** `only` 키워드는 요즘은 거의 사용하지 않아요. 매우 오래된 브라우저(IE8 이전)를 지원해야 하는 레거시 프로젝트가 아니라면 신경 쓸 필요가 없어요. 현대 웹 개발에서는 무시해도 괜찮은 부분이에요.
### `or`로 여러 기능 테스트하기
`or`를 사용해서 여러 기능 중 하나라도 일치하는지 테스트할 수 있으며, 기능 중 하나라도 true이면 `true`로 해석돼요.
예를 들어, 다음 쿼리는 흑백 디스플레이가 있거나 호버 기능이 있는 디바이스를 테스트해요:
```css
@media (not (color)) or (hover) {
/* … */
}
```
`or` 연산자는 `and`와 `not` 연산자와 동일한 레벨에서 사용할 수 없다는 점에 유의하세요. 미디어 기능을 쉼표로 구분하거나, 괄호를 사용해서 미디어 기능의 하위 표현식을 그룹화하여 평가 순서를 명확히 할 수 있어요.
예를 들어, 다음 쿼리들은 둘 다 유효해요:
```css
@media ((color) and (hover)) or (monochrome) {
/* … */
}
/* or */
@media (color) and (hover), (monochrome) {
/* … */
}
```
**💡 강사 팁:** `or` 연산자를 사용할 때는 괄호로 조건을 명확히 그룹화하는 게 중요해요. 복잡한 조건문에서는 가독성을 위해 쉼표로 구분하는 방식을 선호하는 개발자들도 많아요. 어떤 방식을 선택하든 팀 내에서 일관성을 유지하는 게 가장 중요해요!
## 같이 보기
- [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media)
- [컨테이너 쿼리](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries)
- [프로그래밍 방식으로 미디어 쿼리 테스트하기](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Testing)
- [미디어 쿼리 간 CSS 애니메이션](https://davidwalsh.name/animate-media-queries)
- [확장된 Mozilla 미디어 기능](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_extensions#media_features)
- [확장된 WebKit 미디어 기능](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_extensions#media_features)
---
**💡 최종 팁:** 미디어 쿼리는 반응형 웹 디자인의 핵심이에요. 처음에는 복잡해 보일 수 있지만, 실제 프로젝트에서 자주 사용하다 보면 자연스럽게 익숙해질 거예요.
실무에서 자주 사용하는 패턴들을 정리해두면 좋아요:
- 모바일 퍼스트: `min-width`를 주로 사용
- 데스크톱 퍼스트: `max-width`를 주로 사용
- 일반적인 브레이크포인트: 320px(모바일), 768px(태블릿), 1024px(데스크톱), 1440px(대형 화면)
그리고 사용자 환경설정 미디어 쿼리(`prefers-color-scheme`, `prefers-reduced-motion` 등)도 꼭 활용해보세요. 접근성과 사용자 경험을 크게 향상시킬 수 있어요!
브라우저 개발자 도구의 반응형 모드를 적극 활용해서 다양한 디바이스에서 어떻게 보이는지 테스트하는 습관을 들이는 것도 정말 중요해요. 🚀
프론트에_가까운_풀스택_개발자