미디어 쿼리

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

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

다양한 유형의 출력 타겟팅

웹사이트는 종종 화면에 표시되지만 CSS는 다른 출력을 위해 웹사이트 스타일을 지정하는 데도 사용할 수 있습니다. 웹페이지를 화면에는 한 가지 방식으로 표시하고 출력할 때는 다르게 하고 싶을 수 있습니다. 미디어 유형을 쿼리하면 가능합니다.

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

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

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

다음과 같이 스타일시트에서 @media at 규칙을 사용할 수 있습니다. 또는 별도의 스타일시트를 만들고 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;
  }
}

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

이해도 확인

반응형 미디어 쿼리에 대한 지식을 테스트합니다.