미디어 쿼리 사용하기

미디어 쿼리는 단말기의 유형과 화면 해상도, 뷰포트 너비 등에 따라 웹사이트나 앱 스타일을 수정할 때 유용하다.

미디어 쿼리는 대소문자를 구분하지 않으며 화면, 티비, 프린터와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다.

표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다.

 

미디어 쿼리는 유형을 지정했다면 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산된다. 미디어 쿼리가 거짓을 반환하더라도, 스타일 시트는 다운로드 된다. 그렇지만 그 안의 내용은 쿼리의 값이 참이 되어야 적용된다.

 

기본적으로 @media구문은 css 내부의 구문으로, @media구문으로 미디어 쿼리가 시작됨을 알린다.

 

@media screen and (min-width: 30em) {...} 여기서 screen은 미디어 타입이고 (min-width: 30em)은 표현식이다. 만약 @media (min-width: 30em) {...}와 같이 스타일을 작성한다면, 미디어 타입이 생략되었으므로 all이 기본 값이 되어 모든 미디어 타입에 적용되며, 괄호안의 (min-width: 30em)이라는 표현식이 참일 경우에만 {...}안의 실행문이 적용된다.

 

참고로, 조건문에 따라 별도의 외부 css파일을 적용시킬 경우에는 <link>태그를 아래와 같이 사용할 수도 있다.

<link rel="stylesheet" type="text/css" media="all and (조건)" href="A.css">

하지만 조건이 여러개일 경우 이 경우에따라 분기되는 css파일도 많아지고, 사용자의 브라우저가 조건에 해당하는지의  여부와 관계 없이 무조건 파일을 요청하게 된다. 따라서 이는 성능최적화 측면에서 좋지 않으므로, css파일은 하나로 병합하고 css 코드 내부에서 조건 분기 하는 방식이 권장된다.

 

논리연산자는 not, and, only와 같은 논리 연산자를 사용해서 복잡하게 만들 수도 있다.

 

and

 and 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용한다. 전체 쿼리가 참이려면 모든 구성 쿼리가 참을 반환해야 한다.

 

・ 예시:

@media (min-width: 30em) and (orientation: landscape) { ... }

 

not

어떤 미디어 쿼리의 결과가 거짓인 경우를 뜻하며 일련의 미디어 쿼리 전체에 반대되는 결과를 반환한다. 각각의 쿼리에 not 연산자를 부여하는 행위로 착각하는 경우가 많이 있으니 주의해야 한다. not연산자는 개별의 미디어 쿼리를 역으로 바꾸는 것이 불가능하며, 항상 미디어 쿼리 전체를 대상으로 적용된다. 항상 not은 쿼리에서 마지막에 평가된다.

 

・ 예시:

@media not all and (monochrome) { ... }

따라서 위의 경우에는 아래와 같이 해석되는 것이나 마찬가지이다.

 

@media not (all and (monochrome)) { ... }

개별 구문에 대한 not이라기보다는 전체에 대한 not이라고 생각하면 된다.

 

@media not screen and (color), print and (color) { ... }

 

위의 쿼리는 아래와 같이 해석된다.

 

@media (not (screen and (color))), print and (color) { ... }

 

only

only 연산자를 사용하면 미디어 특성을 지정하는 미디어쿼리를 서포트하지 않는 낡은 브라우저에 대응하여 특정 스타일을 적용하는 것이 가능하다. 모던 브라우저에서는 적용되지 않는다. 참고로 미디어쿼리는 IE9이상에서 지원된다.

 

・ 예시:

@media only screen and (color) { ... }

 

,쉼표

or연산자와 같은 동작을 한다. 하나의 미디어 쿼리가 참이면 스타일이 적용된다.

 

・예시: 

@media (min-height: 680px), screen and (orientation: portrait) { ... }

위의 예시는 높이가 680px이상이거나, 스크린이면서 orientation 속성이 portrait인 경우에 적용된다.

 

@media (max-width: 12450px) { ... }

위의 경우에는 최대 넓이가 12,450px 이하인 경우에 css가 적용된다.

 

 

또한, 범위 연산자를 사용해서 덜 장황하게 쿼리를 작성할 수도 있다.

 

・ 범위연산자 사용 전

@media (min-width: 30em) and (max-width: 50em) { ... }

・ 범위연산자 사용 후

@media (30em <= width <= 50em ) { ... }

 

참고 사이트

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries