미디어쿼리를 공부해 보자.

안녕하세요. 키다리디자이너입니다.

오늘은 요즘 있어보인다는 웹사이트의 필수요소인 반응형웹에서 주로 사용되는 미디어쿼리에 대해 알아보도록 할게요.

 

미디어쿼리란 모르면 어려워 보이지만 알고 나면 별 거 아닌 쉬운 기술입니다.

 

키다리디자이너는 구구절절 긴얘기 하는 거 딱 질색이니 짧고 굵고 이해하기 쉽게 설명해보도록 할게요.

1. 반응형웹이란 무엇인가?

 

걍 화면 크기에 따라 레이아웃(그리드) 달라지는 화면이요.
더 이상 알필요 없음 ㅇㅇ

 

2. 미디어쿼리란 무엇인가?

 

화면 크기에 따라 달라질 경우 현재 화면 크기에 따라 다른 CSS내용이 적용될 수 있도록 해주는 것입니다.
이것도 더 이상 알필요 없음 ㅇㅇ

 

3. 코딩 준비

 

미디어 쿼리는 앞서 말한 것처럼 현재 화면사이즈를 인식해 다른 CSS를 뿌려주는 것입니다.

 

보통은 스마트폰, 태블릿, PC화면 세개 정도를 만들어 구분해 주는 방법을 많이 쓰고 있구요, 프로젝트에 따라 해상도를 좀 더 세분화하기도 합니다.

 

가장 일반적인 구분 방법을 말씀드리면..

480px 이하 : 스마트폰
1024px 이하 : 태블릿
1025 이상 : PC

로 구분하고 있습니다.(가로사이즈 기준)

 

각 해상도별 레이아웃이 정해지면 그 다음으로 정해야 할 것이 미디어쿼리를 어디에 작성할 것인가 입니다.

이것도 세가지정도의 방법이 있습니다.

 

1. 해상도 별로 다른 CSS파일을 불러오도록 하는 방법.
이 방법은 여러개의 CSS파일을 작성하고 경우에 따라 불러오도록 하는 방법입니다.

예 : <link rel="stylesheet" href="mobile.css" media="only screen and (min-width: 481px)">

 

2. CSS파일 내용에 작성하는 방법

이 방법은 CSS파일내에 함께 작성하는 것입니다.
예 : @media screen and (min-width: 481px){ h3{color:#000; }

 

3. HTML파일에 작성하는 방법

이 방법은 HTML파일에 미디어쿼리와 CSS를 함께 작성하는 것입니다.
예 : <style> @media screen and (min-width: 481px){ h3{color:#000; } </style>

 

이 중 가장 편하신 방법을 사용하시면 됩니다만 보통은 두번째 방법을 많이 사용하고 있으며 첫번째 방법은 페이지로딩 속도가 길어지므로 잘 사용하지 않습니다.

 

여기까지 정해졌다면 미디어쿼리를 적용해 보겠습니다.

 

4. 코딩 시작

 

미디어쿼리는 쉽게 조건문이라고 생각하시면 이해가 빠르실 것입니다.

개발언어 if구문 처럼 "만약 ~~라면 ~~을 실행하라"의 뜻일 뿐이구요, 그 조건으로 해상도나 디바이스의 가로, 세로등의 값을 이용하는 것 뿐입니다.

 

대충 훑어 보자면 위에서 작성했던 '@media screen and (min-width: 481px){ h3{color:#000; }'라는 구문의 뜻은 현재 최소 너비가 481이상이면 'h3{color:#000;'을 실행하라는 뜻일 뿐입니다.

 

그럼 각각의 속성들을 자세히 살펴보도록 할게요.

 

일단 미디어쿼리 구문은 반드시 '@media'로 시작합니다.(1번 방법은 @가 빠집니다.)

 

그 다음 all이나 only나 print, screen등의 속성을 써주는데 보통은 all이나 only나 screen 세가지 중 하나를 사용합니다.

 

@media all: 모든 디바이스에서 실행됩니다.
@media only: 미디어쿼리를 지원하는 환경에서만 실행됩니다. only 대신 not키워드를 사용하게 되면 해당 내용은 실행되지 않습니다.
@media screen: LCD, CRT등의 화면을 가진 디바이스에서 실행됩니다.

 

여기까지 작성하셨다면 이제 진짜 조건문을 써줄 차례입니다.

 

예시 구문 : '@media screen and (min-width: 481px)'

 

@media screen 다음에 들어간 'and'는 앞 내용과 뒤 내용을 연결해주는 역할을 하며 앞,뒤 내용을 모두 만족해야 실행됩니다.

다시 말해 위 구문에서 'min-width:481px'은 현재 화면이 481px이상일 경우에 실행한다는 것을 의미하기 때문에 'screen'의 조건은 일치하지만 481픽셀보다 작다면 저 구문은 실행되지 않습니다.

 

양쪽 한가지 조건만 일치해도 구문이 실행되도록 하려면 'and' 대신 ','를 사용하면 됩니다.

 

5. 어떤 속성들이 있는가?

 

뷰포트 사이즈로 구분
min-width: 뷰포트 너비가 지정된 픽셀 이상일 경우
max-width: 뷰포트 너비가 지정된 픽셀 이상일 경우
예 : @media screen and (min-width: 481px) and (max-width:860px) {CSS내용} 는 뷰포트 너비가 481px이상이고 860px이하일 경우 CSS내용을 실행합니다.

스크린 사이즈로 구분
device-width: 스크린 너비가 지정된 픽셀일 경우
device-height: 스크린 너비가 지정된 픽셀일 경우

예 : @media screen and (device-width: 320px) and (device-height:860px) {CSS내용} 는 스크린 너비가 가로 320px이고 세로가 480px일 경우 실행합니다.

스크린의 비율로 구분
aspect-ratio: 뷰포트의 가로 세로 비율로 구분하며 min, max의 속성으로 최소/최대 비율을 지정할 수 있습니다.
예 : @media screen and (aspect-ratio:4/3) { } 는 뷰포트의 너비가 4, 높이가 3의 비율일 경우
@media screen and (min-aspect-ratio:4/3) { } 는 뷰포트의 너비가 4, 높이가 3의 비율 이상일 경우
@media screen and (max-aspect-ratio:4/3) { } 는 뷰포트의 너비가 4, 높이가 3의 비율 이하일 경우

픽셀 밀도로 구분
픽셀 밀도는 스크린의 픽셀 밀도에 따른 실제 해상도를 지정합니다.
레티나 디스플레이의 경우 픽셀 밀도가 보통 LCD모니터의 두배이기에 같은 스크린 크기라해도 더 선명한 화질을 제공하고 있습니다.
이 때문에 PC웹의 화면을 아이폰이나 아이패드레티나에서 보면 이미지를 억지로 늘린 것처럼 깨져보이게 됩니다.
이것을 막기 위해 픽셀 밀도에 따라 크기가 다른 이미지를 넣어주시는 것이 좋습니다.
이것에 대해서는 여기서 설명하긴 다소 부담스러우니 다음에 기회가 되면 설명해 드리겠습니다.

 

픽셀 밀도를 지정하려면 웹킷을 사용하여 지정하셔야 합니다.
웹킷이 사용 불가능한 브라우저라면 웹킷을 사용할 수 있게 해주는 스크립트등의 방법을 이용하시길 바랍니다.

 

-webkit-device-pixel-ratio : 스크린의 픽셀 밀도에 따라 구분하며 min, max의 속성으로 최소/

최대 비율을 지정할 수 있습니다.

예 : @media screen and (-webkit-max-device-pixel-ratio:1.0) 는 스크린의 픽셀 밀도가 1배율 이상인 디바이스일 경우(PC모니터나 아이폰3 갤럭시 초기모델 등)
@media screen and (-webkit-max-device-pixel-ratio:1.5) 는 스크린의 픽셀 밀도가 1배율 이하인 디바이스일 경우(갤럭시2 등)
@media screen and (-webkit-max-device-pixel-ratio:2.0) 는 스크린의 픽셀 밀도가 2배율 이하인 디바이스일 경우(아이폰4 이상, 갤럭시3나 노트2 등)

해상도로 구분
resolution: 디바이스의 해상도에 따라 구분되며 min, max의 속성을 추가로 사용합니다. 해상도의 단위로 dpi와 dpcm을 사용합니다.
예 : @media screen and (resolution:100dpi) 1인치당 100개의 화소를 가질 경우
@media screen and (min-resolution:100dpi) 1인치당 100개 이상의 화소를 가질 경우
@media screen and (min-resolution:100dpi) 1인치당 100개 이하의 화소를 가질 경우

디바이스의 가로세로로 구분
orientation:portrait 화면의 높이가 너비보다 클 경우로 디바이스를 세로로 보았을 경우
orientation:landscape 화면의 너비가 높이보다 클 경우로 디바이스를 가로로 보았을 경우

그 외 더 많은 속성들이 있으나 잘 사용하지 않는 것들이라 설명은 생략하겠습니다.

 

여기까지 미디어쿼리에 대해 배워보았습니다.

 

미디어쿼리는 쉬운듯 하지만 막상 코딩해 보면 애매한 부분이 있을 수 있기 때문에 백문이불여일견이라는 말이 있듯 직접 코딩해보시면 더욱 확실한 이해를 하실 수 있으실 거에요.

또한 다른 사이트들을 소스를 직접 보면서 연구하는 것도 많은 공부가 됩니다.

위 내용중 틀린 부분이 있을 수 있으니 수정/보완해야 할 부분이 있으면 언제든 알려주세요 ^_^