미디어 쿼리 사용법 (2)

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

 

기본 문법

: 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다.

다른 프로그래밍 언어의 if 조건문과 비슷한 개념으로 생각하면 이해가 쉬울 듯 합니다.

 

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

@media (조건) {
  스타일
}

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

 

1) 좁은 화면 스타일링

: 핸드폰처럼 좁은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최대 너비를 조건으로 하여 미디어 쿼리를 사용 할 수 있습니다. 예를 들어 800px 이하의 좁은 화면에서 특정 element의 배경색을 토마토 색으로 바꾸고 싶다면,

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

 

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

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

 

2) 넓은 화면 스타일링

: 반대로 TV처럼 넓은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최소 너비를 조건으로 하여 미디어 쿼리를 사용 할 수 있습니다. 예를 들어 800px 이상의 넓은 화면에서 특정 element의 글자색을 토마토 색으로 바꾸고 싶다면,

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

 

아래와 같이 min-width 속성을 이용하여 미디어 쿼리를 작성하면 됩니다.

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

 

3) 화면 너비에 따라 element 숨기기

: 미디어 쿼리는 특정 element를 화면의 너비에 따라 숨길 때도 사용합니다.

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

<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 미디어 쿼리 (Media Query) 사용법