사용자에게 적합한 레이아웃을 제공하기 위해서 media query를 사용합니다.
미디어 쿼리는 단말기의 유형이나 해상도에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.
미디어 유형
장치의 일반적인 범주를 나타냅니다.
not이나 only 논리 연산자를 사용할 때를 제외하면 선택사항이며 default value는 all입니다.
all: 모든 장치에 적합print: 인쇄 결과물 및 출력 미리보기 화면에 표시중인 문서screen: 주로 화면이 대상speech: 음성 합성 장치 대상
논리 연산자
not, and, only와 같은 논리 연산자를 사용해 쿼리를 조합할 수 있습니다.
and: 다수의 미디어 특성을 조합해서 하나의 미디어 쿼리를 만듬. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 한다.not: 쿼리가 거짓일 때만 참을 반환한다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용된다.only: 전체 쿼리가 일치할 때만 스타일을 적용할 수 있도록 사용, 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용하다.- 쉼표(
,): 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용, 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 된다. 논리 연산자or처럼 동작한다.
Level 3 모듈에서는
not키워드를 사용해 단일 미디어 기능을 부정할 수 없고 전체 쿼리만 부정이 가능합니다.
예전의 구형 브라우저에서는
screen and (max-width: 500px)이라는 쿼리를 단순하게screen으로만 읽고 스타일을 적용해버렸습니다.
이러한 경우only screen and (max-width: 500px)식으로 표현해서 전체 쿼리가 일치 할 때만 스타일을 적용할 수 있도록 설정합니다.
only키워드를 사용할 때는 미디어 유형을 필수로 지정해야합니다.
미디어 기능 특정
사용자, 출력 장치, 주변 환경 특징을 설명합니다.
@media (hover: hover) { ... }@media (max-width: 1024px) { ... }첫 번째 쿼리는 마우스가 호버할 수 있으면 스타일을 적용합니다.
css를 많이 사용해본 것은 아니지만, 대부분 이러한 기능을 사용할 때 주료 max-width와 같은 범위 기능을 주로 사용한 것 같습니다.
특정 기능이 현재 브라우저에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다.
유형과 기능을 연산자로 조합하기
미디어의 유형과 미디어 기능을 논리 연산자로 조합해서 다양하게 사용할 수 있습니다.
@media screen and (max-width: 1024px) { ... }기본적으로 반응형에 이용하기 위해서 많이 사용하는 쿼리 입니다.
나눠서 보면 미디어 유형으로 screen, 미디어 기능으로 max-width: 1024px, 논리 연산자로 and가 포함되어 있습니다.
풀어서 해석하면 주로 화면이 대상인 미디어의 넓이가 1024px인 장치라고 이해할 수 있습니다.
@media not all and (monochrome) { ... }not 연산자는 미디어 쿼리 전체의 의미를 반전시킵니다. (Level 3 모듈 기준)
@media not (all and (monochrome)) { ... }와 동일한 의미를 가지게 됩니다.
@media not screen and (color), print and (color) { ... }하지만 쉼표(,)가 포함되어 있다면, 다른 방식으로 반전이 됩니다.
쉼표를 기준으로 쿼리를 구분짓기 때문에 해당 미디어 쿼리는 not screen and (color)와 print and (color) 두 개의 쿼리로 구분짓게 됩니다.
기본적으로 not은 쿼리 전체를 부정하게 됩니다. (Level 4 제외)
이러한 경우 @media not (screen and (color)), print and (color) { ... } 동일하게 해석이 됩니다.
Level 4의 구문 향상
범위 지정
미디어 쿼리 Level 4는 향상된 기능을 제공하는데, 대표적으로 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다.
자주 사용하던 @media (max-width: 1024px) { ... }와 같은 쿼리는 Level 4에서는 @media (width <= 1024px) { ... }와 같이 사용할 수 있습니다.
max-, min-과 같은 키워드를 사용하지 않고 범위로 지정할 수 있습니다.
not으로 기능 부정
Level 3 모듈까지는 쿼리 전체를 부정할 수 있었는데, 기능을 부정할 수 있습니다.
@media (not(hover)) { ... }hover를 할 수 없는 장치를 사용할 때 not(hover)를 사용할 수 있습니다.
or로 다수의 기능 판별
다수의 기능 가운데 하나라도 있는지 테스트해서 그 중에 하나라도 참이라면 true를 반환할 수 있습니다.
@media (not (color)) or (hover) { ... } 해당 쿼리의 의미는 컬러화면이 아니거나 hover 기능이 지원이 되지 않을 때를 의미합니다.
개인적으로 쉼표와 조금 헷갈렸는데요.. 🤯
쉼표(,)는 다수의 미디어 쿼리를 하나의 규칙으로 조합하는게 포인트입니다.
쿼리로 구분짓지 않고, 하나의 쿼리에 다수의 기능을 작성할 때는 or을 사용하는 것이 좋아보입니다.
미디어쿼리 Level 4 사앙에는 상당수의 최신 브라우저를 지원하지만, 몇몇 미디어 기능들은 잘 지원되지 않습니다.
마무리
사실 이전부터 only라는 키워드를 왜 써야하지?🤔라는 생각을 하면서 그냥 복사, 붙여넣기 식으로 많이 사용했던 것 같습니다.
마냥 반응형이라고 하면 @media only screen and (min, max-width: ...) { ... }와 같은 쿼리만 입력하고 breakpoint만 넣어뒀으니까요.. 🤣
Leve 4라는 구분점이 있는지도 오늘 처음 알았습니다.. ㅎㅎ
MDN의 미디어 쿼리 사용하기 페이지를 한 번 쭉 보았는데요!
오늘도 제대로 된 이유를 모르고 사용하던 기능을 알게 되서 만족스럽습니다 👍
