[CSS3] Media Query 를 사용하여 반응형 웹 만들기

개요

Media QueryCSS3 에 포함되어 있으며, 자바스크립트 등을 사용하지 않고도 특정 요소에 해상도별로 대응하는 스타일을 각각 적용시킬 수 있도록 해준다. 정확히는 Media Type 를 이용한 표현식을 통해 스타일의 적용 범위를 한정할 수 있다.  Media Query 는 Media Type 과 하나 이상의 Width, Height 와 같은 Media Feature로 이루어진 조건식으로 구성된다. 이때 Media Type 은 CSS가 해석되는 디바이스의 종류에 따라 각기 다른 스타일을 적용할 수 있도록 해주며, Only 혹은 Not 키워드로 명시하지 않는한 Media Type은 선택적이며 all 타입으로 간주 된다. Media Type은 모든  디바이스에 대응되는 all, 컴퓨터 화면과 스마트폰 화면에 대응되는 screen, 프린트 용도에 대응되는 print 를 포함한 많은 타입을 가지고 있다. 더 자세하게 알고싶으면 여기를 클릭하자.

기본 형태

미디어 쿼리의 기본적인 형태는 다음과 같다.

@media [Only | Not] MediaType and (조건식) and (조건식) and ... {
  /* 실행문 */
}

Only 혹은 Not 키워드를 사용하여 Media Type 을 정해주고, and 연산자를 사용하여 조건식을 묶어준다. 조건식은 Feature: Value 형식으로 작성한다. 실행문에는 일반적인 CSS 코드를 넣는다.  실행문에 넣어준 CSS 코드는 조건이 만족할때만 적용되며 그 이외에 상황에서는 적용되지 않는다.

조건식을 이루는 대표적인 Media Feature

width (max-width, min-width) / height (max-height, min-height)

뷰포트의 너비와 높이를 나타낸다. 뷰포트의 크기는 HTML 컨텐츠의 내용을 표시하는 전체적인 크기를 말하며, 화면의 크기와는 거리가 있는 개념이다.

device-width / device-height

디바이스가 출력할 수 있는 영역의 크기, 즉 스크린의 해상도를 의미한다.

orientation

화면이 세로모드인지 가로모드인지 판단할 수 있다. 이를 판단하는 기준은 뷰포트의 너비와 높이의 비율이다.

aspect-ratio (max-aspect-ratio, min-aspect-ratio)

스크린의 너비와 높이의 비율. Value 는 너비/높이 형태로 작성한다. 너비와 높이의 비율을 4:5로 하고싶다면 4/5로 작성하면 된다.

반응형웹을 만들기 위해 자주 사용되는 Feature 들은 이정도이며, 더 많은 Feature 을 알고싶으면 여기를 클릭하자.

직접 작성해보기

Media Type과 Media Query의 기본적인 형태, 대표적인 Media Feature 들을 알게되었으니 직접 미디어 쿼리를 작성하여 반응형웹을 만들 수 있다. 아직 Media Query를 어떻게 사용하는지 감이 잘 잡히지 않겠지만, 이 과정만 따라오면 이해에 문제는 없을 것이다.

.a-box {
  width: 100px;
  height: 100px;
  background-color: red;
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  .a-box { 
    width: 200px;
    height: 50px;
    background-color: blue;
  }
}

.a-box 라는 엘리먼트가 존재한다고 가정한다. 미디어 쿼리 문법을 통해 모든(all) Media Type 에서 뷰포트의 크기가 최소 768px (min-width) 그리고 최대 1024px (max-width) 일때 실행문의 스타일을 적용하게 된다. 즉, .a-box 의 스타일은 평소에는 width가 100px, height가 100px, background-color는 red 지만, 조건을 만족했을때는 width는 200px, height는 50px, background-color는 blue로 바뀌게 된다.

템플릿

사실 흔히 말하는 반응형 웹이란 뷰포트의 크기에 따라 대응되는 콘텐츠의 스타일을 다르게 하는 것이므로 거의 width (max-width, min-width) 만을 사용하여 구현한다고 생각하면 된다.

/* Mobile Device */
@media screen and (max-width : 767px) {

}

/* Tablet Device */
@media screen and (min-width : 768px) and (max-width : 991px) {

}

/* Desktop Device */
@media screen and (min-width : 992px) {

}

필자는 위와 같은 형태의 템플릿으로 보통 반응형 웹을 구현한다. 사이트 특성마다 지정하는 몇몇 수치가 조금 차이가 날 수 있으나 대부분은 저런 형식으로 구현하면 매끄럽게 작동하는 모습을 볼 수 있다. Media Query를 지원하지 않는 모바일 환경을 위해 모바일 부분은 Media Query를 사용하지 않는 경우도 있다.

필자가 제작한 CSS 오픈소스 라이브러리 Gridin 도 위와같은 템플릿을 사용하였으며, 혹시 Media Query 를 사용하여 그리드 레이아웃을 구현하기 번거로운 독자들은 Gridin 라이브러리를 다운받아 사용하자.