미디어 쿼리

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

미디어 쿼리는 @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가 적용됩니다. 이러한 조건을 미디어 기능이라고 합니다.

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

@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 규칙을 사용하세요.

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

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

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

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

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

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

이해도 확인

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