Media Query

미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등) 하에 특정 스타일만 적용되도록 하는 기능이며 반응형 웹을 제작할 때 사용된다.

반응형을 제작할 땐 모바일을 먼저 작업하는 게 수월하다.
모바일에 맞추어 CSS를 작성한 뒤에 미디어 쿼리로 데스크톱일 때 적용할 스타일을 작성하는 식이다.

사용법

• <link>로 조건을 만족하는 CSS 파일을 불러오기
  <link rel="stylesheet" media="screen and (min-width: 200px)" href="style.css" />스크린의 너비가 최소 200px 이상일 때 style.css를 불러와서 연결한다.
• 스타일시트 내에서 사용하기
  @media 논리연산자 미디어타입 논리연산자 (조건) { 스타일 }
  @media라는 키워드로 시작해서 특정 미디어타입이고 특정 조건을 만족하면 특정 스타일을 적용한다.

미디어 타입

미디어타입은 무슨 장치를 대상으로 할 건지 정하는 속성이다.

• all : 모든 장치 대상
• print : 인쇄 결과물 및 출력 미리보기 화면 대상
• screen : 모니터나 스크린이 있는 장치 대상
• speech : 음성 합성 장치 대상

논리 연산자

• and : 조건을 모두 만족하는 경우에만 스타일을 적용
• not : 조건을 부정하는 경우, 스타일을 적용
• comma(,) : 조건중 하나라도 만족하는 경우, 스타일을 적용
• only : 미디어쿼리를 지원하는 브라우저에서만 작동하게 함
  

미디어 특성(조건)

조건에 들어가는 특성은 아주 많은데 주로 사용하는 것만 나열하자면

• webkit-min-device-pixel-ratio, webkit-max-device-pixel-ratio : 출력 장치의 최소, 최대 픽셀 비율. css의 1px 안에 들어가는 디바이스의 스크린 픽셀의 숫자를 값으로 한다.
• min-width, max-width : 스크롤바를 포함한 뷰포트의 최소, 최대 너비
• orientation : 뷰포트의 방향

나머지 조건들과 미디어 쿼리의 자세한 사용법은 MDN 미디어 쿼리 사용하기에서 확인할 수 있다.

미디어 쿼리 헷갈리지 않게 해석하기

min-width나 max-width를 사용할 때 무엇을 의미하는 건지 헷갈렸는데
"야 스크린 너, 이 스타일 적용되려면 이런 이런 조건 만족해야 한다!"는 식으로 해석하니 이해하기 쉬웠다. 예를 들자면 이런 식이다.

야 스크린 너, 이 스타일 적용받으려면 너비 1000px 넘으면 안 된다!
@media screen and (max-width: 1000px) {
	스타일
}

야 스크린 너, 이 스타일 적용받으려면 너비가 최소 200px은 돼야한다!
@media screen and (min-width: 200px) {
	스타일
}