1. 개요
미디어 쿼리는 개발자가 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우 선택적으로 CSS를 적용하게 해준다.
반응형 디자인에 유용하게 쓰이는 미디어 쿼리 사용법을 정리한다.
2. 미디어 쿼리 기본
기본적인 미디어 쿼리 형식은 다음과 같다.
@media media-type and (media-feature-rule) {
/* css 작성 */
}media-type: 미디어 유형
이 CSS가 어떤 미디어를 위한 것인지 브라우저에게 알려준다.media-feature-rule: 미디어 기능 규칙
CSS를 적용하기 위한 규칙이다.
반응형을 위해 보통 가장 많이 사용하는 것은 min-width, max-width, width 등이 있다.
2.1. 미디어 유형
미디어 유형은 all, print, screen 세 가지가 있다.
기본값은 all이다.
@media print {
body {
font-size: 12pt;
}
}위 예시는 인쇄된 문서일 때 본문을 12pt로 설정한다.
브라우저에서는 적용되지 않는다.
2.2. 미디어 기능 규칙
미디어의 유형을 지정한 후 규칙을 적용할 미디어 기능을 설정할 수 있다.
/* 브라우저 뷰포트 너비가 정확히 600px인 경우 적용 */
@media screen and (width: 600px) {
body {
color: red;
}
}
/* 브라우저 뷰포트 너비가 600px보다 좁은 경우 적용 */
@media screen and (max-width: 600px) {
body {
color: red;
}
}
/* 브라우저 뷰포트 너비가 600px보다 넓은 경우 적용 */
@media screen and (min-width: 600px) {
body {
color: red;
}
}
/* 장치가 가로모드인 경우 본문 텍스트 색상 변경 */
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
/* 사용자가 마우스를 사용 중일 때(=커서를 올릴 수 있을 때) 본문 텍스트 색상 변경 */
/* 터치스크린이나 키보드 내비게이션일 때는 적용 X */
@media (hover: hover) {
body {
color: rebeccapurple;
}
}3. 복잡한 미디어 쿼리
3.1. 논리곱 미디어 쿼리
and를 사용해 미디어 기능을 결합할 수 있다.
모든 조건이 참이어야만 적용된다.
/* 브라우저, 최소 너비 600px 이상, 가로 모드여야 적용 */
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
color: blue;
}
}3.2. 논리합 미디어 쿼리
콤마(,)를 사용해 논리합 미디어 쿼리를 사용할 수 있다.
모든 조건 중 하나라도 참이면 적용된다.
/* 브라우저이면서 최소 너비가 600px 이상이거나, 브라우저이면서 가로 모드면 적용 */
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}3.3. 논리 부정 미디어 쿼리
미디어 쿼리의 조건을 반대로 뒤집는다.
조건이 거짓이면 적용된다.
/* 세로 모드면 적용 */
@media not (orientation: landscape) {
body {
color: blue;
}
}4. 미디어 쿼리가 필요한 시점
현대에는 디바이스의 종류가 매우 다양해졌기 때문에 모든 기기에 최적화된 깔끔한 레이아웃은 불가능에 가깝다.
그래서 컨텐츠가 어떤 방식으로든 깨지기 시작하면 해당 크기에서 미디어 쿼리를 설정해 수정해주는 것이 현실적으로 가장 나은 접근이다.
flexbox, grid, 다단 레이아웃은 기본적으로 반응형을 제공하기 때문에 미디어 쿼리로 조건을 설정할 필요가 없다.
미디어 쿼리가 도입되는 지점을 중단점(breakpoints)이라고 한다.