CSS 미디어 쿼리 (Media Query) 사용법
Mar 13, 2021 · 3 min read



다양한 디바이스들이 웹브라우징을 지원하면서 웹에서 화면의 해상도에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 이번 포스팅에서는 이러한 반응형 웹디자인의 기본이되는 CSS의 미디어 쿼리(Media Query)에 대해서 살펴보겠습니다.

기본 문법

미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이라고 생각하시면 이해가 쉬우실 겁니다.

@media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같습니다.

@media (조건) {
  스타일
}

스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시됩니다.

좁은 화면 스타일링

핸드폰처럼 좁은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최대 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있습니다.

예를 들어, 800px 이하의 좁은 화면에서 특정 엘러민트의 배경색을 토마토 색으로 바꾸고 싶다면,

<div class="small-tomato">좁은 화면에서는 배경색이 토마토 색이 됩니다.</div>

다음과 같이 max-width 속성을 이용하여 미디어 쿼리를 작성해주면 됩니다.

@media (max-width: 800px) {
  .small-tomato {
    background-color: tomato;
  }
}

넓은 화면 스타일링

반대로 TV처럼 넓은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최소 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있습니다.

예를 들어, 800px 이상의 넓은 화면에서 특정 엘러민트의 글자색을 토마토 색으로 바꾸고 싶다면,

<div class="large-tomato">넓은 화면에서는 글자색이 토마토 색이 됩니다.</div>

다음과 같이 min-width 속성을 이용하여 미디어 쿼리를 작성해주면 됩니다.

@media (min-width: 800px) {
  .large-tomato {
    color: tomato;
  }
}

화면 너비에 따라 엘리먼트 숨기기

미디어 쿼리는 특정 엘리먼트를 화면의 너비에 따라 숨길 때도 많이 사용됩니다.

예를 들어, 목록에서 어떤 항목은 넓은 화면에서 숨기고 어떤 항목은 좁은 화면에서 숨기고 싶다면,

<ul>
  <li class="desktop">저는 넓은 화면에서만 보입니다.</li>
  <li>저는 항상 보입니다.</li>
  <li class="mobile">저는 좁은 화면에서만 보입니다.</li>
</ul>

다음과 같이 max-width 속성과 min-width 속성을 이용하여 미디어 쿼리로 작성해주면 됩니다.

@media (max-width: 600px) {
  .desktop {
    display: none;
  }
}

@media (min-width: 1000px) {
  .mobile {
    display: none;
  }
}

마치면서

이상으로 CSS에서 미디어 쿼리를 사용하는 방법에 대해서 간단히 알아보았습니다.