미디어 쿼리

미디어 쿼리는 특정 미디어에서 어떤 css를 적용할 것인지 지정한다.

• 기본형태 : @media [ only | not ] 미디어 유형 [and 조건] * [and 조건]

• 미디어 유형 : all, print, screen, tv, aural, braille, handheld, projection, tty, embossed

only를 붙이면 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어쿼리를 무시하고 실행하지 않는다.
not를 붙이면 다음에 오는 미디어 유형을 제외하고 남은 유형에만 적용한다.

뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 자주 사용한다.

@media screen and (min-width: 1440px) {}

• width, height : 웹 페이지의 가로 너비, 세로 높이를 지정
• min-width, min-height: 웹 페이지의 최소 너비, 최소 높이를 지정
• max-width, max-height: 웹 페이지의 최대 너비, 최대 높이를 지정

디바이스 자체의 너비나 높이를 고려하기도 한다.

@media screen and (min-device-width: 375px) and (min-device-height: 812px) {}

• device-width, device-height : 디바이스의 가로 너비, 세로 높이를 지정
• min-device-width, min-device-height: 디바이스의 최소 너비, 최소 높이를 지정
• max-device-width, max-device-height: 디바이스의 최대 너비, 최대 높이를 지정

화면 회전 속성을 고려해야 할 때도 있다.

@media screen and (min-device-width: 812px) and (orientation: landscape) {}

• portrait : 세로 모드 지정
• landscape : 가로 모드를 지정