미디어 쿼리란 무엇인가요?
_____A: 미디어 쿼리는 웹 개발에서 다양한 디바이스와 화면 크기에 맞춰 스타일을 적용할 수 있도록 하는 CSS 기술입니다. 사용자의 화면 특성(예: 너비, 높이, 해상도 등)을 감지하여 조건에 맞는 CSS 규칙을 적용하게 해줍니다.
Q: 미디어 쿼리는 왜 필요하나요?
A: 미디어 쿼리를 사용하면 데스크톱, 태블릿, 스마트폰 등 기기마다 다른 화면 크기에 맞는 반응형 웹 디자인을 구현할 수 있어 사용자 경험을 향상시킵니다.
Q: 미디어 쿼리의 기본 구문은 어떻게 되나요?
A: 기본 구문은 다음과 같습니다.
```css
@media (조건) {
/* 조건이 참일 때 적용할 CSS */
}
```
Q: 미디어 쿼리에서 자주 사용하는 조건에는 무엇이 있나요?
A: 대표적으로 다음과 같은 조건들이 있습니다.
- `max-width`: 최대 화면 너비 지정 (예: `max-width: 600px`)
- `min-width`: 최소 화면 너비 지정 (예: `min-width: 768px`)
- `orientation`: 화면 방향 (예: `orientation: portrait` 또는 `landscape`)
- `resolution`: 화면 해상도 (예: `resolution: 2dppx`)
Q: 미디어 쿼리를 사용한 예시는 어떻게 되나요?
A: 예를 들어, 화면 너비가 768px 이하인 기기에서 폰트 크기를 변경하려면 다음과 같이 작성합니다.
```css
@media (max-width: 768px) {
font-size: 14px;
}
}
```
Q: 미디어 쿼리는 어디에 작성하나요?
A: 보통 CSS 파일 내에 작성하거나, HTML 문서의 `