디자이너는 사용자에 맞게 디자인을 조정할 수 있습니다. 이에 관한 가장 명확한 예는 사용자 기기의 폼 팩터, 너비, 기기 가로세로 비율 등입니다. 디자이너는 미디어 쿼리를 사용하여 이러한 다양한 폼 팩터에 응답할 수 있습니다.
미디어 쿼리는 @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;
}
}
아래 예는 미디어 쿼리를 사용하여 사용자 기기의 폼 팩터에 맞게 디자인을 조정하는 방법을 보여주지만, 이는 가능성의 일면에 불과합니다. 미디어 쿼리는 너비와 높이를 훨씬 넘어서는 접근성 기능과 테마 색상의 사용자 환경설정에 액세스할 수 있습니다. 미디어 쿼리를 사용하여 레이아웃을 조정하는 것은 이러한 기능 등을 기반으로 하는 반응형 디자인의 좋은 출발점이 됩니다.
학습 내용 확인하기
반응형 미디어 쿼리에 관한 지식을 테스트해 보세요.
미디어 쿼리는 화면 크기에 대해서만 존재하나요?
화면은 웹 콘텐츠가 소비되거나 표시되는 유일한 장소인가요?
기본 미디어 유형은 무엇인가요?
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
은(는) 유효한 미디어 쿼리 기능 조건이 아닙니다.