미디어 쿼리(media query) css 사용법 - 반응형웹 제작의 필수 요소

최근 홈페이지 및 웹사이트의 제작 트렌드 중 하나가 반응형으로 제작하는 것인 거는 다들 잘 아시죠~.

그래서 오늘은

이런 반응형 웹을 만들기 위해서 필수 요소라고도 할 수 있는 css의 미디어 쿼리에 대해서 알아볼까 합니다. 저도 거의 모든 클라이언트에게 이 미디어 쿼리를 사용해서 반응형 사이트를 제작해 드리고 있습니다.

어떻게 보면 이제는 트렌드가 아니라 기본 장착 옵션 같은 의미가 되어버린거 같기도 합니다만.

그럼, 이제부터 차근히 알아보도록 하시죠~.

 

Media Query의 지정방법

미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있습니다.

1. HTML의 HEAD의 link태그의 media속성에 지정하기
2. css파일내에서 @media 지정하기
3. css파일내에서 import 하기

 

그럼, 대표적인 미디어 타입에는 어떠한 것이 있을까요?

미디어 타입 ( medai type )

1. all : 전부
2. screen : 스크린 화면
3. print : 프린터
4. tv : 텔레비전

이렇게 4가지로 나누어 볼 수 있습니다.

 

3가지 미디어 쿼리 적용방법 예시

이제 위에서 알아본 3가지 media query의 적용방법의 형식을 알아보도록 하겠습니다.

 

먼저,

1. HTML의 link태그의 media속성에 값을 설정해 주는 방법입니다.

<link href="css/common.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">

 

 

2. css파일 내에 직접 media를 설정해 주는 방법입니다.

@media all and (min-width:480px) { ... }

 

 

3. media query를 설정한 파일을 css파일 내에서 import 해서 적용시켜주는 방법입니다.(2번과 거의 흡사한 방식입니다.)

/* common.css */

@import "../media.css";

/* media file */
@media screen and (min-width:768px) { ... }

 

 

 

 

기본적인 설정 방법을 알아보도록 하겠습니다.

미디어 쿼리 기본적 설정 및 지정 방법

 

 

480px이상의 미디어 타입의 경우

@media (min-width:480px) { ... }

/* 또는 */

@media screen and (max-width:480px) { ... }

@media라고 먼저 기술을 해주고 타입 혹은 넓이를 and를 사용해서 연결을 시켜주면 됩니다. 그리고 넓이를 지정해 줄 때 괄호 안에 min-width 혹은 max-width를 해주게 되는데 지금은 그냥 이렇게 한다는 것만 눈여겨봐 두고 전체적인 형태만 알고 넘어가자고요~ (나중에 다시 설명 들어가 테니까요^^)

 

480px에서 768px까지 넓이의 미디어 타입

@media screen and (min-width:480px) and (max-width:768px) [ ... }

 

 

all과 and가 생략 가능한 경우

@media (min-width:480px) { ... }

/* 또는 */

@media all (min-width:480px) { ... }

 

 

and를 사용해서 모든 조건을 필요로 하는 미디어 타입

@media screen and (min-height:640px) and (min-width:480px)

 

 

컴마 ( , )를 사용해서 어느 한쪽만 만족하는 미디어 타입

@media screen and (min-width: 320px) and (min-width: 480px), screen and (min-width: 480px), print

 

 

이제, 위에서 형태만 보고 넘어가자고 했던 내용,
다시 말해서 미디어 쿼리를 지정해 줄 때 나누어 주는 기준에 대한 속성을 알아보도록 할게요.

max-width : 뷰 영역에서의 최대넓이. 즉 지정한 사이즈보다 작을 경우 적용
min-width : 뷰영역에서의 최소 넓이. 즉 지정한 사이즈보다 넓은 경우 적용

이 두 가지는 위에서 잠깐 봤으니까~~

 

그다음,

max-device-width : 디바이스 사이즈의 최대 넓이. 이 사이즈보다 작은 경우 적용
min-device-width : 디바이스 사이즈의 최소 넓이. 이 사이즈보다 넓을 경우 적용

orientation : 세로 길이 혹은 가로길이의 둘 중 하나로 기준을 적용

device-pixel-ratio : 디바이스의 해상도를 기준으로 적용

 

 

orientation에 대해서

두 가지의 속성 값을 정해 줄 수가 있습니다.

portrait : 세로 길이 중심의 경우
landscape : 가로길이 중심의 경우

알기 쉽게 예를 들자면, portrait는 스마트폰을 그대로 세로로 길게 볼 경우에 해당하고 landscape는 가로로 놓고 볼 경우에 해당한다고 생각하면 됩니다.

@media screen and (orientation:portrait) { ... }
@media screen and (orientation:landscape) { ... }

 

 

device-pixel-ratio에 대해서

Retina 혹은 고해상도에 반응시키기 위한 속성이라고 보시면 됩니다. 디바이스 픽셀과 css픽셀의 비율이라고 합니다.
저도 아직 이 미디어 타입을 사용해 본 적은 없습니다. 그냥 이런 게 있구나 정도로만 알아 두시면 될 듯합니다.

 

 

그리고 resolution이라는 것도 있는데~

resolution(해상도)에 대해서

이 속성에 값을 지정해 줄 수 있는 표준 규격(W3C)은 dpi, dpcm, dppx의 3종류가 있습니다. 서포트를 하지 않는 브라우저도 있는 관계로 위에서 언급한 device-pixel-ratio와 함께 사용하지 않으면 안 됩니다. 그중에서 dppx를 사용하는 것이 아래의 코드와 같이 지정하기가 편합니다.

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){ ... }

하지만 이 미디어 타입도 거의 사용하지는 않습니다.

 

 

 

미디어 쿼리 지정 순서

자 이제 그럼,

이 미디어 쿼리 (media query)를 지정해 줄 때, 어떠한 순서대로 해 주면 좋은지 한번 보도록 하겠습니다.

크게 두 가지의 형태로 볼 수가 있는데요, PC를 기준으로 할 경우와 Mobile을 기준으로 할 경우가 있습니다.

 

PC 기준의 경우

PC로 볼 경우의 스타일을 먼저 지정해 준 후, 모바일 스타일을 덮어쓰기 형태로 지정해 주는 방식입니다.

@media screen and (max-width:1200px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:480px) { ... }

 

 

모바일 기준의 경우

모바일의 스타일을 먼저 지정해 준 후, PC 스타일을 지정해 주는 방식입니다.

@media screen and (max-width:480px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:1200px) { ... }

 

 

Viewport의 지정 ( 필수 / 중요 )

지금까지 살펴본 미디어 쿼리를 에러 없이 정확하게 적용시키기 위해서는 viewport의 지정 또한 필수입니다. 주로 모바일을 위한 기능이라고 보시면 됩니다. 처음 로딩되었을 때의 이미지 사이즈 혹은 확대, 축소들이 가능합니다. 예를 들어 어떠한 사이트를 스마트폰으로 보고 있을 경우 손가락 두 개로 이미지를 확대하려고 했을 때 이것을 가능하게 해 주느냐 해 주지 않느냐 하는 기능을 말합니다.

지정 방법은 head 태그 안에 아래와 같이 코드를 입력해 주면 됩니다.

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes,initial-scale=1.0" />

 

 

이해가 좀 되셨는지 궁금합니다.
반응형 웹 제작에 있어서 필수 조건이지만 다소 생소한 단어들도 보이고 입력해야 하는 항목들도 많은 게 사실입니다. 익숙해지는 방법은... 음... 이 글 한번 읽어보시고 다른 검색도 해 보시면서 익숙해지는 수 밖에는 달리 방법이 없을 것 같습니다. 몇 번이고 하다 보면 나도 모르게 감각을 익히게 되고 자연스럽게 사용을 할 수 있게 되리라 봅니다.

 

---

 

끝맺음

오늘은 미디어 쿼리 (media query)에 대한 타입 그리고 지정 방법, 그리고 지정 순서, 뷰포트(viewport)에 대해서 알아보는 시간을 가져봤습니다.

 

자아, 그럼 다음에는 또 다른 좋은 정보들 팁들 가지고 오도록 하겠습니다.
사요나라~