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