미디어 쿼리 사용하기

미디어 쿼리

웹사이트를 보면 브라우저 크기에 따라 화면이 변하는 경우를 본 적이 있습니다. 이때 사용할 수 있는 것이 미디어 쿼리입니다.

미디어 쿼리는 출력 장치의 특징을 참조해 분기 처리를 하는 것입니다. 예를 들어 브라우저의 출력 화면이 1200px보다 작으면 어떤 요소를 지우거나 보여주는 경우가 있을 수 있죠. 혹은 특정 미디어 기기에 따라 보여지는 화면이 달라질 수도 있죠.

미디어 쿼리 문법

@media media-type and (media-feature-rule) {
  
}

위와 같은 방식으로 미디어 쿼리를 작성합니다.

미디어 타입은 페이지가 인쇄되거나 브라우저 화면이거나 이런 것들을 정하는 것입니다. 생략될 수 있습니다.

괄호 안은 미디어의 조건을 주는 것인데요. 위에서 보았듯이 화면의 크기나 높이 같은 것이 될 수 있죠. 혹은 세로나 가로의 비율을 따져서 조건을 줄 수 있습니다.

보통은 화면 크기에 따라 조건을 줍니다. 아래의 예시를 보시죠.

@media screen and (max-width: 1500px) {
  html {
    font-size: 14px;
  }
}

이 예시는 브라우저 너비가 최대 1500px까지 글씨 크기를 14px로 만드는 것입니다. 즉, 너비가 0~1500px의 브라우저 환경에서는 html 요소의 글씨 크기가 14px인 것이죠. 하지만, 그 이상의 너비는 기존 html요소의 글씨 크기가 적용됩니다.

@media screen and (orientation: portrait) {
  html {
    font-size: 14px;
  }
}

화면의 방향에 따라서도 적용가능합니다. 위의 경우는 세로가 더 긴 화면을 나타냅니다. landscape를 값으로 주게되면 가로가 더 긴 경우이죠.

and와 ,

여러 조건을 처리하고 싶으면 and와 ,를 사용할 수 있습니다. and는 논리곱으로 자바스크립트의 &&와 같이 두 조건을 모두 만족시켜야 동작합니다. ,는 OR와 같습니다. 둘 중 하나만 만족시켜도 동작하죠.

not

부정 논리도 가능합니다.

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

미디어 쿼리 전체를 부정하는 것이죠.