미디어 쿼리

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

미디어 쿼리는 @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">

쿼리 조건

미디어 유형에 조건을 추가할 수 있습니다. 이를 미디어 쿼리라고 합니다. 미디어 유형이 일치하고 조건도 true인 경우에만 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-rules를 사용하세요.

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

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

콘텐츠에 따라 중단점 선택

미디어 기능 조건이 true가 되는 지점을 중단점이라고 합니다. 중단점은 인기 있는 기기 크기보다는 콘텐츠에 따라 선택하는 것이 좋습니다. 기술 출시 주기마다 변경될 수 있기 때문입니다.

이 예에서 50em는 텍스트 행이 불편할 정도로 길어지는 지점입니다. 따라서 인터페이스의 가독성을 높이기 위해 중단점이 생성됩니다. column-count 속성을 사용하여 이 시점부터 텍스트가 두 개의 열로 나뉩니다.

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

조합

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

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

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

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

학습 내용 확인하기

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