Logo

CSS 미디어 쿼리 (Media Query) 사용법

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

기본 문법

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

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

@media (조건) {
  스타일
}

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

좁은 화면 스타일링

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

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

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

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

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

넓은 화면 스타일링

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

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

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

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

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

화면 너비에 따라 HTML 요소 숨기기

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

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

<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;
  }
}

뷰포트(viewport)의 폭이 600px 이하로 내려가면 desktop 클래스가 적용된 부분이 화면에서 사라지고, 뷰포트(viewport)의 폭이 1000px 이상으로 올라가면 mobile 클래스가 적용된 부분이 화면에서 사라지는 것을 볼 수 있으실 겁니다.

마치면서

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

사실 미디어 쿼리는 이렇게 뷰포트(viewport) 너비에 따라 다른 스타일을 적용하기 위해서 뿐만 아니라 다크 모드 지원 등 다양한 용도로 활용이 가능합니다. 이 부분에 대해서는 추후 기회가 되면 다뤄보도록 하겠습니다.

This work is licensed under CC BY 4.0

messageCircle