미디어 쿼리

디자이너는 사용자를 수용할 수 있도록 디자인을 조정할 수 있습니다. 가장 명확한 예는 사용자 기기의 폼 팩터입니다. 너비, 기기 가로세로 비율, 기타 측면이 있습니다. 디자이너는 미디어 쿼리를 사용하여 이러한 다양한 폼 팩터에 대응할 수 있습니다.

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

다양한 유형의 출력 타겟팅

웹사이트는 화면에 표시되는 경우가 많지만 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 규칙을 사용하세요.

표시 영역 크기에 따라 스타일 조정

반응형 디자인의 경우 가장 유용한 미디어 기능 중 하나는 브라우저 표시 영역의 크기입니다. 브라우저 창이 특정 너비보다 넓을 때 스타일을 적용하려면 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. */
}

이 미디어 쿼리는 width 미디어 기능과 작거나 같음 연산자를 사용하여 작성할 수도 있습니다.

@media (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. /*
}

범위 구문을 사용하여 작성할 수도 있습니다.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

콘텐츠에 따라 중단점 선택

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

이 예시에서 50em는 텍스트 줄이 너무 길어져 불편해지는 지점입니다. 따라서 인터페이스를 더 읽기 쉽게 하기 위해 중단점이 생성됩니다. column-count 속성을 사용하면 해당 지점부터 텍스트가 두 개의 열로 나뉩니다.

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

Combinations

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

모든 조건이 참일 때만 스타일이 적용되도록 미디어 쿼리를 결합할 수 있습니다. 이 예에서는 열 스타일이 적용되려면 뷰포트가 너비 50em 이상, 높이 30em 이상이어야 합니다. 이러한 중단점은 콘텐츠 양을 기반으로 선택되었습니다.

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

or 및 not 키워드를 사용하여 스타일을 적용할 때 더 복잡한 상황을 표현할 수도 있습니다. 이러한 요소는 논리적으로 추론하기 어려울 수 있으므로 예상대로 작동하고 상호작용하는지 테스트해야 합니다.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

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

이해도 확인

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