디자이너는 사용자를 수용하도록 디자인을 조정할 수 있습니다. 가장 명확한 예는 사용자 기기의 폼 팩터(너비, 기기 가로세로 비율 등)입니다. 디자이너는 미디어 쿼리를 사용하여 이러한 다양한 폼 팩터에 대응할 수 있습니다.
미디어 쿼리는 @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;
}
}
이 예에서는 미디어 쿼리를 사용하여 디자인을 사용자 기기의 폼 팩터에 맞게 조정하는 방법을 보여줍니다. 하지만 이는 가능성의 일부에 불과합니다. 미디어 쿼리는 너비와 높이를 넘어 접근성 기능 및 테마 색상의 사용자 환경설정에 액세스할 수 있습니다. 미디어 쿼리를 사용하여 레이아웃을 조정하는 것은 이러한 기능을 기반으로 하는 반응형 디자인을 시작하는 좋은 방법입니다.
이해도 확인
반응형 미디어 쿼리에 관한 지식을 테스트하세요.
미디어 쿼리는 화면 크기에만 있나요?
웹 콘텐츠가 소비되거나 표시되는 유일한 장소가 화면인가요?
기본 미디어 유형은 무엇인가요?
some
landscape
none
screen
all
브라우저가 모바일에서 디자인을 조정하지 못하도록 하려면 무엇을 사용해야 하나요?
font-size: 200%
<meta name="viewport" content="width=device-width, initial-scale=1">
width: 100%
브라우저 창이 720px
보다 위에 있을 때 적용되는 미디어 쿼리입니다.
@media (max-width: 720px)
@media (width: 720px)
@media (min-width: 720px)
@media (clamp-width: 720px)