미디어 쿼리(Media Query)는 반응형 웹 디자인의 핵심 부분이다.
뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.
예를 들어 뷰 포트가 480px보다 넓다
라고 내가 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 어떠한 CSS를 적용할 수 있다.
가장 간단한 미디어 쿼리 구문은 다음과 같다.
@media media-type and (media-feature-rule) {
/*CSS CODE */
}
① 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형
② 괄호로 묶은 CSS 규칙이 적용되기 위해 전달되어야하는 규칙 또는 조건문 격인 미디어 표현식
③ 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합
지정할 수 있는 미디어 유형은 아래와 같다.
all
print
screen
speech
@media print { body { font-size: 12pt; } }
위의 코드는 페이지가 인쇄된 경우에만 본문을 12pt로 설정한다는 뜻이다.
미디어 유형을 지정한 뒤에 적용할 미디어 기능을 선정할 수 있다.
반응형 디자인을 만들기 위해 가장 자주 사용되는 기능이다.
min-width
와max-width
,width
등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있다.
@media screen and (width: 300px) { body { color: skyblue; } }
위의 코드는 뷰포트가 정확이 300px인 경우 본문 색을 skyblue로 변경시킨다는 뜻이다.
width
및 height
미디어 기능은 범위 지정에 사용될 수도 있는데, min-
또는 max-
접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다.
@media screen and (max-width: 700px) { body { color: pink; } }
위의 코드는 뷰포트가 700px보다 좁은 경우 본문 색이 pink라는 뜻이다.
실제로 최소값 또는 최대값을 주로 사용해 반응형 디자인을 만든다.
orientation
으로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해준다.
@media (orientation: landscape) { body { color: rebeccapurple; } }
위의 코드는 장치가 가로 방향에 있는 경우 본문 텍스트 생상을 변경하는 코드이다.
** 참고로 세로는 orientation: portrait
이다.
미디어 쿼리를 가지고 그것들을 결합하거나 쿼리 목록을 만들 수 있다.
and
를 이용해 미디어 기능을 결합한다.
@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } }
위 코드는 뷰포트의 너비가 최소 400px 이상이고, 장치가 가로 모드인 경우에만 HTML 본문 텍스트 색상이 blue라는 뜻이다.
@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } }
위 코드는 뷰포트가 400px 이상이거나 장치가 가로모드면 HTML 본문 텍스트 색상이 blue라는 뜻이다.
not
연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있다.
@media not all and (orientation: landscape) { body { color: blue; } }
위의 코드는 가로 모드가 아닐 때, 즉 세로 모드일 때 THML 본문 텍스트 색상이 blue 라는 뜻이 된다.
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries