미디어 기능을 통해 기기와 환경설정에 응답할 수 있는 모든 방법을 요약한 내용입니다.
미디어 쿼리가 없으면 반응형 디자인이 불가능할 것입니다. 미디어 쿼리를 사용하기 전에는 사용자가 웹사이트를 방문하는 데 사용하는 기기의 종류를 알 수 없었습니다. 디자이너는 가정을 해야 했습니다. 이러한 가정은 고정 너비 디자인 또는 유동 레이아웃으로 인코딩되었습니다.
미디어 쿼리의 도입으로 이러한 모든 것이 달라졌습니다. 처음으로 디자이너들은 사람의 절반을 만날 수 있었습니다. 디자이너는 사용자의 기기에 반응하도록 레이아웃을 조정할 수 있습니다.
미디어 쿼리는 선택적 미디어 유형과 필수 미디어 기능으로 구성된다는 점을 기억하세요. 지난 몇 년 동안 미디어 유형에는 큰 변화가 없었습니다. 가능한 값은 여전히 4가지뿐입니다.
@media all
@media screen
@media print
@media speech
반면에 미디어 기능은 크게 확장되었습니다. 이제 디자이너는 화면 크기 이상의 크기에 맞게 디자인을 조정하여 사용자의 절반 이상을 충족할 수 있습니다.
표시 영역 측정기준
지금까지 웹에서 가장 많이 사용되는 미디어 쿼리는 표시 영역 너비를 처리하는 쿼리입니다. 하지만 여기에도 선택권이 주어집니다. max-width 미디어 기능을 사용하여 특정 너비 미만의 스타일을 적용하거나 min-width 미디어 기능을 사용하여 특정 너비 위에 스타일을 적용할 수 있습니다.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
개인적으로 저는 min-width을(를) 사용하고 싶습니다. 저는 레이아웃 스타일을 추가하는 방식으로 적용합니다. 이전 규칙을 실행취소하는 대신 각 중단점에서 새 레이아웃 규칙을 도입합니다.
이 추가 접근 방식은 높이에도 적합합니다. min-height를 사용하면 더 많은 표시 영역 높이를 사용할 수 있게 됨에 따라 더 많은 규칙을 도입할 수 있습니다. 예를 들어 세로 공간이 충분한 경우 브라우저 창 상단에 고정하려는 헤더 요소가 있을 수 있습니다.
@media (min-height: 30em) {
header {
position: fixed;
}
}
하지만 원하는 경우 max-height 미디어 기능을 사용할 수 있습니다. 여기서 헤더가 기본적으로 고정되지만 세로 공간이 충분하지 않으면 고정 정도가 삭제됩니다.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
min-와 max- 접두사 중에서 선택하면 width와 height에만 적용되는 것이 아닙니다. aspect-ratio 미디어 기능도 동일한 옵션을 제공합니다. 또한 너비와 높이의 정확한 비율로 스타일을 적용하려는 경우 접두사가 없는 버전을 제공합니다.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
다양한 가로세로 비율에 맞게 여러 스타일을 제공하는 것은 금방 알기 어려울 수 있습니다. 이렇게 세밀하게 제어할 필요가 없다면 orientation 미디어 기능이 필요에 더 적합할 수도 있습니다. 가능한 두 가지 값은 portrait 또는 landscape입니다.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
'세로 모드' 및 '가로 모드'라는 용어가 휴대기기의 방향을 가리키는 데 가장 많이 사용되지만, orientation 미디어 기능은 기기에 국한되지 않습니다. 일반적인 노트북의 전체 화면 브라우저 창의 orientation 값은 landscape입니다.
디스플레이
디스플레이마다 픽셀 밀도가 dpi(인치당 도트 수)으로 측정됩니다. resolution 미디어 기능을 사용하여 다양한 픽셀 밀도에 맞게 스타일을 조정할 수 있습니다. aspect-ratio와 마찬가지로 resolution에는 최솟값, 최댓값, 일치검색의 3가지 변형이 있습니다.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
resolution 미디어 쿼리를 사용할 필요가 없을 수도 있습니다. 픽셀 밀도는 일반적으로 이미지의 경우에만 문제가 되며 반응형 이미지는 HTML에서 픽셀 밀도를 직접 처리하는 방법입니다.
반면 CSS에서는 애니메이션과 전환을 정의합니다. update 미디어 기능을 사용하여 이러한 애니메이션과 전환을 조정하여 다양한 새로고침 빈도에 반응할 수 있습니다. 이 미디어 기능은 none, slow, fast의 세 가지 값 중 하나를 보고합니다.
update 값이 none이면 새로고침 빈도가 없음을 의미합니다. 예를 들어 인쇄된 페이지는 업데이트할 수 없습니다.
update 값이 slow이면 디스플레이를 빠르게 새로고침할 수 없습니다. 전자 잉크 디스플레이는 화면 재생 빈도가 느린 화면의 한 가지 예입니다.
update 값이 fast이면 디스플레이가 애니메이션과 전환을 처리할 수 있을 만큼 빠르게 새로고침됩니다.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
디스플레이의 모든 측면이 하드웨어 기능과 관련된 것은 아닙니다. 테마 설정에 관한 모듈에서 웹 앱 매니페스트 파일에서 속성을 정의하는 방법을 알아봤습니다. 이러한 속성 중 하나가 display이며 값을 fullscreen, standalone, minimum-ui 또는 browser로 지정할 수 있습니다. 관련 display-mode 미디어 기능을 사용하면 이러한 다양한 옵션에 맞게 스타일을 맞춤설정할 수 있습니다.
웹 앱 매니페스트에 standalone의 display 값을 제공했다고 가정해 보겠습니다. 다른 사용자가 홈 화면에 내 사이트를 추가하면 브라우저 인터페이스 없이 사이트가 실행됩니다. 이러한 사용자에게는 뒤로 버튼을 표시할 수 있습니다.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
색상
기기의 색상 기능을 쿼리하기 위한 다양한 미디어 기능이 있습니다. 회색 음영만 출력하는 모든 디스플레이의 스타일을 조정하려면 값 없이 monochrome 미디어 기능을 사용하면 됩니다.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
해당하는 color 미디어 기능이 있습니다.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
컬러 화면의 경우 미디어 기능 color-gamut, color-index 또는 dynamic-range를 사용하여 쿼리를 작성할 수 있습니다. 이들 모두는 화면의 색상 기능에 관한 구체적인 세부정보를 보고합니다.
이 예에서는 색상 값이 디스플레이의 최대 밝기, 색심도, 대비율의 조합을 보고하는 dynamic-range 미디어 기능에 반응하여 업데이트됩니다. 가능한 값은 standard 또는 high입니다. high의 dynamic-range 값을 보고하는 고화질 화면에는 새로운 CSS color() 함수를 사용하여 다른 색상 공간이 제공됩니다.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
상호작용
미디어 기능에서 사이트와 상호작용하는 데 사용된 입력 메커니즘의 유형(hover, any-hover, pointer, any-pointer)도 보고할 수 있습니다. 자세한 내용은 상호작용 관련 모듈을 참고하세요.
환경설정
사용자 환경설정에 응답할 수 있는 다양한 미디어 쿼리(prefers-color-scheme, prefers-contrast, prefers-reduced-motion)가 있습니다. 자세한 내용은 테마 설정 및 접근성에 관한 모듈을 참고하세요.
하나의 미디어 쿼리에 미디어 기능을 결합할 수 있습니다. 기기의 화면 재생 빈도가 빠르고 사용자가 모션 감소를 선호하지 않는 경우에만 적용되도록 애니메이션 스타일의 범위를 지정할 수 있습니다.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
추가 미디어 기능
앞으로 더 많은 미디어 기능이 추가될 예정입니다.
forced-colors 및 inverted-colors 미디어 기능은 기기에서 제한된 색상 팔레트를 사용하는지 또는 반전된 색상 팔레트를 사용하는지 보고합니다.
scripting 미디어 기능을 사용하면 JavaScript의 사용 가능 여부에 따라 CSS를 조정할 수 있습니다.
prefers-reduced-data라는 미디어 기능을 사용하면 사용자가 데이터 전송량 제한이 있는 연결임을 지정할 수 있으므로 더 작거나 적은 애셋을 전송할 수 있습니다.
다른 제안은 아직 준비 중입니다. 다음 모듈인 마지막 모듈에서는 다양한 화면 구성을 처리하는 미디어 기능 제안에 관해 알아봅니다.
이해도 테스트
미디어 기능에 관한 지식 테스트
미디어 쿼리는 @media (width: 1024px)와 같은 특정 너비의 기기를 확인할 수 있나요?
1023px 초과 및 1025px 미만의 너비를 동시에 확인해야 합니다.min-width 및 max-width를 사용할 수 있습니다.미디어 쿼리는 @media (aspect-ratio: 4/3)와 같은 특정 aspect-ratio에서 기기를 확인할 수 있나요?
aspect-ratio에는 이 옵션이 있습니다.유효한 색상 미디어 쿼리는 무엇인가요?
@media (color)@media (monochrome)@media (color-gamut: srgb)@media (min-color-index: 15000)@media (dynamic-range: high)다음 중 유효한 사용자 환경설정 미디어 쿼리는 무엇인가요?
@media (prefers-color-scheme: dark)@media (prefers-colors: high-definition)@media (prefers-reduced-motion: reduce)@media (prefers-contrast: more)@media (prefers-site-speed: fast)