[CSS] media query에 대해 알아보자

안녕하세요, Einere입니다.

(광고 차단 기능을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는 CSS에서 사용하는 media query(이하 미디어 쿼리)에 대해 알아보도록 하겠습니다.

 

미디어 쿼리란?

미디어 쿼리는 CSS의 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해줍니다. 자세한 정보는 W3C Recommendation에 나와있습니다.

 

문법

미디어 쿼리는 다음의 문법을 가지고 있습니다.

@media <media type> and (media feature) {
  /*...*/
}

시작은 at-rule이라고 불리는 @media 키워드로 시작해야 하며, 괄호로 쌓인 media feature는 0개 이상이어야 하며, 꺾쇠 안에 스타일을 정의하면 됩니다. (media type은 옵션입니다.)

 

media type

정의된 곳	목록
HTML4	all, aural, braille, handheld, print, projection, screen, tty, tv
CSS2	all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

사용 가능한 미디어 타입은 위와 같습니다. 미디어 타입을 지정하면, 해당 유저 에이전트(user agent)에만 스타일이 적용됩니다.

흔히 사용되는 미디어 타입은 screen과 print입니다.

 

media type	설명
all	모든 미디어 타입
aural	음성 장치 (speech로 대체됨)
braille	점자 장치
embossed	페이지 점자 프린터
handheld	소형 장치
print	프린터
projection	프로젝터, 프레젠테이션
screen	컴퓨터 화면
speech	스크린 리더
tty	터미널과 같은 고정폭 글자를 사용하는 미디어 장치
tv	텔레비전

더 자세한 정보는 CSS3 mediaquery background를 참고해주세요.

 

media feature

@media screen and (max-width: 1023px) {
	...
}

미디어 피쳐는 괄호로 쌓여있으며, name과 value를 가집니다. 이런 구조 때문에 CSS property와 유사하지만, 엄밀히는 다릅니다.

• 프로퍼티는 선언부(declaration)에 사용되며, 미디어 피쳐는 표현부(expression)에 사용됩니다.
• 대부분의 미디어 피쳐는 min- 혹은 max- 접두사를 허용합니다.
• 프로퍼티는 반드시 값을 가져야 하지만, 미디어 피쳐는 값이 없어도 됩니다. 단, min- 혹은 max- 접두사가 붙은 미디어 피쳐는 반드시 값을 가져야 하며, 가지지 않다면 올바르지 않은 형식(malformed)입니다.
• 프로퍼티는 각종 함수를 이용한 복잡한 값을 가질 수 있지만, 미디어 피쳐는 단위를 가진 단일 값만 가질 수 있습니다. (유일한 예외는 aspect-ratio와 device-aspect-ratio 미디어 피쳐입니다.)

 

logic operator

@media screen and (min-width: 400px) or (max-width: 800px) {
  ...
}

논리 연산자에는 and, or, not이 있습니다.

and 대신에 ,를 사용할 수 있지만, 콤마는 옛날 문법이니 사용하지 않는 것이 좋습니다.

 

@media not print and (min-width: 100px) {
  ...
}

not 연산자는 모든 미디어 쿼리를 부정합니다. 따라서 위 예시 스타일은 (1) 유저 에이전트가 프린트가 아니거나, (2) min-width가 100px 이상이 아닌 경우에 적용됩니다. 코드로 표현하자면 !(user-agent == print && min-width >= 100px) 이겠네요.

그러나 not 연산자를 사용하려면 무조건 미디어 타입을 정의해야 합니다. 따라서 일부 조건에만 부정을 취하는 not() 함수도 있습니다.

@media screen and (not(min-width: 100px)) {
  ...
}

not() 함수는 미디어 타입에 사용할 수 없으며, 미디어 피쳐 내부에서 사용할 수 있습니다.

 

nesting

@media (min-width: 400px) and (max-width: 800px) {
  /*...*/
}

@media (min-width: 400px) {
  @media (max-width: 800px) {
    /*...*/
  }
}

and로 묶인 미디어 피쳐는 중첩문으로 바꿀 수 있습니다.

@media screen {} 내부에 미디어 쿼리를 작성하여, 화면에서만 적용되는 스타일을 정의할 수도 있습니다.

 

media query in HTML

<link href="style.css" rel="stylesheet" media="screen and (min-width: 400px)"/>

<style media="screen and (min-width: 400px)">
  ...
</style>

link 혹은 style 태그의 media속성으로 정의할 수 있습니다.

 

미디어 쿼리 적용

mobile first vs desktop first

반응형 디자인을 설계할 때 크게 mobile first design과 desktop first design 두 가지를 고려합니다.

• mobile first design : 모바일 화면을 우선으로 디자인하며, min-width 미디어 피쳐를 이용해 데스크탑 화면을 고려한다.
• desktop first design : 데스크탑 화면을 우선으로 디자인하며, max-width 미디어 피쳐를 이용해 모바일 화면을 고려한다.

대부분은 mobile first design을 사용하는 듯합니다. 아무래도 작은 화면을 넓은 화면에 맞도록 늘리기는 쉽지만 반대는 어려워서 그렇지 않나 싶습니다.

 

main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40rem) {
  main {
    flex-direction: row;
  }
}

위 코드가 대표적인 mobile first design을 적용한 스타일이라고 할 수 있습니다.

반응형 웹에 대해 더 자세히 알고 싶으시다면, 반응형 웹을 위한 그라운드 룰을 참고해주세요.

 

media feature

미디어 피쳐에 사용하는 이름들은 대표적으로 dimensions과 aspect ratio로 나눌 수 있습니다.

 

dimensions

width, height와 같은 크기 관련 속성들이 사용됩니다. 물론 접두사를 붙이는 것이 더 좋습니다.

보통은 값의 단위로 px을 사용합니다. 화면의 픽셀에 따라 모바일 및 태블릿, 데스크탑을 구분하죠. em단위를 사용한다면 사용자의 확대/축소에 유연하게 대응할 수 있다고 합니다. (rem은 사파리에서 버그가 있다고 하네요.)

 

aspect ratio

@media (aspect-ratio: 16/9) {
  /* 화면비가 16:9인 경우*/
}

@media (min-aspect-ratio: 1/1) {
  /* 최소 화면 비가 1:1 이상인 경우. 즉, 화면의 높이에 비해 너비가 더 넓은 경우 */
  /* (orientation: landscape) 와 동일 */
}

@media (max-aspect-ratio: 1/1) {
  /* 최대 화면 비가 1:1 미만인 경우. 즉, 화면의 너비에 비해 높이가 더 높은 경우 */
  /* (orientation: portrait) 와 동일 */
}

높이와 너비의 비율인 aspect-ratio나 orientation을 사용할 수도 있습니다.

 

 

theme (mode)

@media (prefers-color-scheme: dark) {
  /* wants dark mode */
}

@media (prefers-color-scheme: light) {
  /* wants light mode */
}

요즘은 라이트모드 혹은 다크 모드를 지원하는 웹 사이트가 많습니다.

prefers-color-scheme을 이용하면 사용자의 테마에 맞춰서 스타일링을 할 수 있습니다. (정확히 어떻게 사용자의 테마를 감지하는지는 잘 모르겠지만요..)

prefer-color-scheme을 이용해 브라우저가 다크 모드를 지원하는지 확인하는 방법은 Finding out if dark mode is supported by the browser를 참고해주세요.

light와 dark외에도 no-preference가 있는데, 해당 값은 최근 스펙에서 제거되었다고 합니다.

 

motion

@media (prefers-reduced-motion: reduce) {
  /* wants reduced motion */
}

@media (prefers-reduced-motion: no-preference) {
  /* doesn't want reduced motion */
}

깜빡이거나 반짝거리는 애니메이션은 ADHD와 같은 인식장애를 가진 사용자들에게 문제가 될 수 있습니다. 따라서 prefers-reduced-motion을 이용하여, 사용자가 애니메이션 축소 관련 기능을 설정 여부에 따라 스타일링을 다르게 할 수 있습니다.

 

display mode

브라우저가 어떻게 보여질지 정할 수 있습니다.

value	설명
fullscreen	가능한 모든 디스플레이 영역이 사용됩니다. 만약 해당 값을 가진 미디어 쿼리가 없다면, standalone 미디어 쿼리를 적용합니다.
standalone	웹이 독립적인 앱으로 보여집니다. 즉 앱은 여러 윈도우와 앱 런처 아이콘을 가지며 네비게이션 컨트롤 UI가 보이지 않습니다. 만약 해당 값을 가진 미디어 쿼리가 없다면, minimal-ui 미디어 쿼리를 적용합니다.
minial-ui	standalone과 유사하지만, 네비게이션 컨트롤 UI가 보여집니다. 만약 해당 값을 가진 미디어 쿼리가 없다면, browser 미디어 쿼리를 적용합니다.
browser	웹이 일반 브라우저처럼 보입니다. 다른 값들과 다르게, fallback이 없습니다.

 

resolution

/* ddxp 대신 x를 사용할 수 있습니다. */
@media (min-resolution: 1x) {
  /* your regular background here */
}

@media (min-resolution: 2x) {
  /* your retina background here */
}

화면의 픽셀 집적도에 따라 스타일을 결정할 수 있습니다. 다른 미디어 피쳐와 동일하게 접두사를 붙이는 것이 좋습니다.

보통 레티나 디스플레이가 지원되는 기기에서 레티나 이미지를 지원할 때 사용합니다.

CSS에서 1 pixel은 96 dpi 이기 때문에 1 ddpx는 일반 해상도이며 2 ddpx는 레티나 해상도입니다.

 

이 외에도 많은 미디어 피쳐가 있습니다만, 다 적기는 힘드네요.

더 많은 미디어 피쳐를 알고 싶으시다면, 하단의 링크를 참고하시면 좋을 듯합니다.

 

참고

https://polypane.app/blog/the-complete-guide-to-css-media-queries/

The complete guide to CSS media queries | Polypane browser for developers

https://www.w3.org/TR/css3-mediaqueries/

Media Queries

https://blog.outsider.ne.kr/298

CSS의 Media Type에 대해서... :: Outsider's Dev Story