미디어 쿼리

디자이너는 사용자에게 맞게 디자인을 조정할 수 있습니다. 가장 명확한 예는 사용자 기기의 폼 팩터(너비, 기기 가로세로 비율 등)입니다. 미디어 쿼리를 사용하면 디자이너가 이러한 다양한 폼 팩터에 응답할 수 있습니다.

미디어 쿼리는 @media 키워드(CSS at-rule)로 시작되며 다양한 사용 사례에 사용할 수 있습니다.

다양한 유형의 출력 타겟팅

웹사이트는 종종 화면에 표시되지만 CSS는 다른 출력에 맞게 웹사이트 스타일을 지정하는 데도 사용할 수 있습니다. 웹페이지가 화면에서는 한 가지 방식으로 표시되고 인쇄 시에는 다른 방식으로 표시되도록 할 수 있습니다. 미디어 유형을 쿼리하면 이를 실행할 수 있습니다.

이 예에서는 배경 색상이 회색으로 설정되어 있습니다. 그러나 페이지가 인쇄되는 경우 배경 색상은 투명해야 합니다. 이렇게 하면 사용자의 프린터 잉크가 절약됩니다.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

이와 같이 스타일시트에서 @media at-rule을 사용하거나 별도의 스타일시트를 만들고 link 요소에 media 속성을 사용할 수 있습니다.

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

CSS에 미디어 유형을 지정하지 않으면 미디어 유형 값이 자동으로 all이 됩니다. 다음 두 CSS 블록은 동일합니다.

body {
  color: black;
  background-color: white;
}
@media all {
   body {
     color: black;
     background-color: white;
   }
}

다음 두 줄의 HTML도 동일합니다.

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">

쿼리 조건

미디어 유형에 조건을 추가할 수 있습니다. 이를 미디어 쿼리라고 합니다. CSS는 미디어 유형이 일치하고 조건도 true인 경우에만 적용됩니다. 이러한 조건을 미디어 기능이라고 합니다.

미디어 쿼리의 구문은 다음과 같습니다.

@media type and (feature)

스타일이 별도의 스타일시트에 있는 경우 link 요소에서 미디어 쿼리를 사용할 수 있습니다.

<link rel="stylesheet" href="specific.css" media="type and (feature)">

브라우저 창이 가로 모드(표시 영역 너비가 높이보다 큼)인지 세로 모드(표시 영역 높이가 너비보다 큼)인지에 따라 서로 다른 스타일을 적용하려고 한다고 가정해 보겠습니다. 이를 테스트하는 데 사용할 수 있는 orientation라는 미디어 기능이 있습니다.

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

또는 별도의 스타일시트를 사용하려면 다음 단계를 따르세요.

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

이 경우 미디어 유형은 all입니다. 이 값은 기본값이므로 원하는 경우 생략할 수 있습니다.

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

또는 별도의 스타일시트를 사용합니다.

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

print와 같이 서로 다른 미디어 유형에 별도의 스타일 시트를 사용하는 것은 괜찮지만 모든 미디어 쿼리에 별도의 스타일 시트를 사용하는 것은 좋지 않습니다. 대신 @media at-rule을 사용하세요.

뷰포트 크기에 따라 스타일 조정

반응형 디자인의 경우 가장 유용한 미디어 기능 중 하나는 브라우저 표시 영역의 크기입니다. 브라우저 창이 특정 너비보다 넓을 때 스타일을 적용하려면 min-width를 사용합니다.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

max-width 미디어 기능을 사용하여 특정 너비 미만의 스타일을 적용합니다.

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

미디어 쿼리에서 어떤 CSS 길이 단위도 사용할 수 있습니다. 콘텐츠가 주로 이미지 기반인 경우 픽셀이 가장 적합할 수 있습니다. 콘텐츠가 대부분 텍스트 기반인 경우 em 또는 ch와 같이 텍스트 크기를 기반으로 하는 상대 단위를 사용하는 것이 좋습니다.

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

미디어 쿼리를 결합하여 두 개 이상의 조건을 적용할 수도 있습니다. and 단어를 사용하여 미디어 쿼리를 결합합니다.

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

콘텐츠에 따라 중단점 선택

미디어 기능 조건이 참이 되는 지점을 중단점이라고 합니다. 인기 기기 크기는 기술 출시 주기에 따라 변경될 수 있으므로 콘텐츠를 기준으로 중단점을 선택하는 것이 가장 좋습니다.

이 예에서 50em는 텍스트 줄이 불편할 정도로 길어지는 지점입니다. 따라서 인터페이스를 더 읽기 쉽게 만들기 위해 중단점이 생성됩니다. column-count 속성을 사용하여 이 시점부터 텍스트는 두 열로 나뉩니다.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Combinations

너비뿐만 아니라 뷰포트의 높이를 기반으로 미디어 쿼리를 사용할 수 있습니다. 이는 '스크롤 없이 볼 수 있는 부분'의 인터페이스 콘텐츠를 최적화하는 데 유용할 수 있습니다. 이전 예에서 독자가 넓지만 짧은 브라우저 창을 사용하는 경우 한 열 아래로 스크롤한 다음 다시 위로 스크롤하여 두 번째 열의 맨 위로 이동해야 합니다. 표시 영역의 너비와 높이가 충분할 때만 열을 적용하는 것이 더 안전합니다.

모든 조건이 true인 경우에만 스타일이 적용되도록 미디어 쿼리를 결합할 수 있습니다. 이 예에서 열 스타일을 적용하려면 표시 영역의 너비가 50em, 높이가 60em 이상이어야 합니다. 이러한 시점은 콘텐츠의 양에 따라 선택되었습니다.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

이러한 예는 미디어 쿼리를 사용하여 디자인을 사용자 기기의 폼 팩터에 맞게 조정하는 방법을 보여줍니다. 하지만 이는 가능성의 일부에 불과합니다. 미디어 쿼리는 너비와 높이를 넘어 접근성 기능 및 테마 색상의 사용자 환경설정에 액세스할 수 있습니다. 미디어 쿼리를 사용하여 레이아웃을 조정하는 것은 이러한 기능 등을 기반으로 하는 반응형 디자인을 시작하는 좋은 출발점입니다.

이해도 확인

반응형 미디어 쿼리에 관한 지식을 테스트하세요.

미디어 쿼리는 화면 크기에만 존재하나요?

true
다시 시도해 보세요. 인쇄, 어두운 모드, 밝은 테마 등 시스템 환경설정 등에 관한 미디어 쿼리입니다.
거짓
🎉

웹 콘텐츠가 소비되거나 표시되는 유일한 장소가 화면인가요?

true
다시 시도해 보세요. 웹사이트는 종이에 인쇄되거나, 검색엔진 스파이더에 의해 크롤링되거나, 스크린 리더 기술에 의해 소리 내어 읽히거나, 어시스턴트를 통해 봇에 의해 사용자에게 읽혀질 수 있습니다.
거짓
🎉

기본 미디어 유형은 무엇인가요?

screen
다시 시도해 보세요. screen은 기본 유형이 아닙니다.
none
다시 시도해 보세요. none은(는) 올바른 미디어 유형이 아닙니다.
all
🎉
some
다시 시도해 보세요. some은(는) 유효한 미디어 유형이 아닙니다.
landscape
다시 시도해 보세요. landscape은(는) 유효한 미디어 유형이 아닙니다.

브라우저가 모바일 디자인의 크기를 조정하지 못하게 하려면 무엇을 사용해야 하나요?

width: 100%
다시 시도해 보세요.
font-size: 200%
다시 시도해 보세요.
<meta name="viewport" content="width=device-width, initial-scale=1">
🎉
미디어 쿼리
다시 시도해 보세요.
HTML5
다시 시도해 보세요.

브라우저 창이 720px 초과일 때 적용되는 미디어 쿼리

@media (width: 720px)
다시 시도해 보세요. 이 미디어 쿼리는 브라우저 창이 720px과 같은 경우에만 적용됩니다.
@media (max-width: 720px)
다시 시도해 보세요. 이 미디어 쿼리는 브라우저 창이 720px 미만일 때 사용됩니다.
@media (min-width: 720px)
🎉 브라우저 창이 720px 이상이므로 이 내용을 읽을 수 있습니다.
@media (clamp-width: 720px)
다시 시도해 보세요. clamp-width은(는) 유효한 미디어 쿼리 기능 조건이 아닙니다.