반응형 웹페이지 제작을 위한 미디어쿼리 살펴보기

반응형 웹페이지 만드실때 이것저것 고려할께 많아서 머리가 많이 아프실텐데요. 간단하게 처리하기에는 부트스트랩같은 프레임워크로 진행을 하면 되게 간단하게 반응형 홈페이지를 손쉽게 만들 수 있는데요. 이번에는 반응형 웹페이지 제작을 위한 미디어쿼리 기초적인 내용에 대해서 알아보는 시간을 가져보겠습니다.

반응형 홈페이지를 만들기 위해서는 미디어 쿼리 사용이 필수인데요. 미디어쿼리란 무엇일까요?

미디어쿼리 살펴보기 - 미디어쿼리란 무엇일까?

일단, 질문부터 드릴께요.반응형홈페이지란 무엇일까요? 지금보시고 있는 화면, 모바일 기기에서 보는 화면, 타블렛피씨에서 보는 화면이 각각 다른데 한가지 웹페이지로 디바이스의 해상도를 감지를 해서 각각의 영역에 맞게 화면을 보여주는걸 반응형 웹페이지라고 합니다.

그래서 각각의 기기에 맞는 해상도를 읽어오고 거기에 맞는 사이즈를 미리 만들어 놓으면 플랫폼에 상관없이 일괄적인 웹페이지 서비스를 할 수가 있는것이죠.

뭘론 세부적으로 들어가게 된다면 익스플로러가 보는화면, 파이어폭스가 보는화면, 크롬이 보는 화면, 각각의 브라우저 버전에 따라서 확인도 해야하구요. 복잡하지만 오늘은 간단하게 맛만 보는 시간을 가져보도록 하겠습니다.

예전에 제가 적었던 글인데요. 기종별 반은형웹 해상도 테스트 사이트에 대해서 글을 남겼습니다.

2015/08/05 - [퍼블리싱] - 기종별 반응형웹 해상도 테스트 사이트

위 사이트에 접속하시면 기기별로 바로 확인을 하실 수가 있는데요. 반응현 웹페이지 제작을 위해서는 자주 들리실것 갈네요. ㅎㅎ

 

미디어쿼리에 대해서 설명을 드려야 하는데 주저리 주저리 말이 많았습니다. 일단 미디어쿼리는 익스플로러 9이상 버전부터 지원을 합니다. 익스플로러가 표준이 아니기 때문에 이런 사단이 일어났는데요. 퍼블리셔에게는 익스플로러 8버전이 제일 어려운 버전입니다.

미디어쿼리 지원이 안되기 때문에 억지로나마 지원을 할수있는 플러그인을 활용해서 간신히 화면 레이아웃을 맞추는 상태입니다.

그럼 미디어 쿼리 구성을 살펴볼까요?

@media all and (max-width:320px){}

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

간단하게 맥스값과 최소값을 나타내보았습니다. 디바이스 최대크기가 320px 이하이면 실행하는 쿼리와 디바이스 최소해상도가 1024px 일때 실행하는 미디어쿼리입니다.

잠깐 보시면 감이 좋으신분들은 바로 응용해서 반응형 웹페이지를 만드실 수가 있을텐데요. 디바이스별 최대해상도를 알고 있으면 간단하게 응용해서 웹페이지를 만드실 수가 있습니다.

@charset "utf-8";

@charset "euc-kr";

@media all and (max-width:320px){}

@media all and (min-width:534px) and (max-width:640px){}

@media all and (min-width:769px) and (max-width:1024px){}

이런식으로 장치의 해상도를 지정해서 반응형 CSS를 만드실 수가 있습니다. 조금더 응용하자면 레티나 해상도 지원까지도 가능하며, 메타태그를 활용하는 법도 있습니다만 자세한 내용은 다음기회에 말씀드리도록 하겠습니다.