CSS 미디어 쿼리(Media Query) | 데이터카페

CSS 미디어 쿼리(Media Query)
-  사용자 디바이스의 특성에 따라 스타일을 동적으로 조절하는 데 사용됩니다. 주로 반응형 웹 디자인에서 활용되며, 다양한 미디어 유형 및 디바이스 특성에 따라 다른 스타일을 적용할 수 있습니다. 

미디어 쿼리의 기본 구조
@media media-type and (media-expression) {
  // CSS 규칙
}


@media 키워드: 미디어 쿼리의 시작을 나타냅니다.
media-type: 미디어 유형을 지정합니다.
media-expression: 미디어 표현식을 지정합니다.

media-type 
- all: 모든 장치에 적용됩니다.
- screen: 화면 장치에 적용됩니다.
- print: 인쇄 장치에 적용됩니다.
- handheld: 손으로 들고 사용하는 장치에 적용됩니다.
- tv: TV에 적용됩니다.
- speech: 음성 출력 장치에 적용됩니다.

media-expression
- width: 뷰포트의 너비를 지정합니다.
- height: 뷰포트의 높이를 지정합니다.
- orientation: 뷰포트의 방향을 지정합니다.
- resolution: 뷰포트의 해상도를 지정합니다.
- color: 뷰포트의 색상 모드를 지정합니다.
- aspect-ratio: 뷰포트의 종횡비를 지정합니다.

반응형 웹 해상도 처리
css
@media (min-width: 1400px) {
  // CSS 규칙
}
@media (min-width: 1200px) {
  // CSS 규칙
}
@media (max-width: 990px) {
  // CSS 규칙
}
@media (max-width: 575px) {
  // CSS 규칙
}