디자이너는 사용자에게 맞게 디자인을 조정할 수 있습니다. 이에 대한 가장 명확한 예는 사용자 기기의 폼 팩터입니다. 너비, 기기 가로세로 비율 등 미디어 쿼리를 사용하면 디자이너가 이러한 다양한 폼 팩터에 응답할 수 있습니다.
미디어 쿼리는 @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;
}
}
이 예는 미디어 쿼리를 사용하여 사용자 기기의 폼 팩터에 맞게 디자인을 조정하는 방법을 보여줍니다. 그러나 이것들은 가능성의 극히 일부일 뿐입니다. 미디어 쿼리는 너비와 높이를 훨씬 능가할 수 있습니다. 접근성 기능 및 테마 색상에 대한 사용자 환경설정에 액세스 미디어 쿼리를 사용하여 레이아웃을 조정하는 것은 이러한 기능 등을 기반으로 하는 반응형 디자인을 시작하는 좋은 출발점입니다.
이해도 확인
반응형 미디어 쿼리에 대한 지식을 테스트합니다.
미디어 쿼리는 화면 크기에만 존재하나요?
화면은 웹 콘텐츠가 소비되거나 표시되는 유일한 장소인가요?
기본 미디어 유형은 무엇인가요?
screen
screen
은 기본 유형이 아닙니다.none
none
은(는) 유효한 미디어 유형이 아닙니다.all
some
some
은(는) 유효한 미디어 유형이 아닙니다.landscape
landscape
은(는) 유효한 미디어 유형이 아닙니다.브라우저가 모바일 디자인의 크기를 조정하지 못하게 하려면 무엇을 사용해야 하나요?
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
은(는) 올바른 미디어 쿼리 기능 조건이 아닙니다.