미디어 쿼리(Media Query)
출처 ;?http://blog.naver.com/PostView.nhn?blogId=insidebig&logNo=40144656994
현재의 미디어 쿼리가 있기까지 그 시작은 놀랍게도 10여년 전으로 거슬러 올라간다.
여기에 더욱 놀라운 사실은 W3C(World Wide Web Consortium)가 다가올 미래사회에?대해?정확하게 예측했다는 점이다.
W3C가 1999년 이전에 이미, 웹에 접근할 수 있는 장치의 다양성이 점점 커지는 현재같은 상황이 오리란 것을 정확히 예측한 것이다.
그리고?그 상황에 대한 고심의 결과물이 바로 오래되고 익숙한 표준 HTML 4.01에 포함된?미디어 타입 선언인 것이다.
(미디어 쿼리의 전신이라 볼 수 있지않을까)
하지만?미디어 타입을 선언하는 방식은 실제로 많이 사용되지 않았는데,
미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점이 있었기 때문이다.
CSS3에는 이런 미디어 타입의 단점을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데
이를?미디어?쿼리라고 한다. 그리고 이 미디어 쿼리를 이용한 웹을?반응형 웹디자인(responsive web design)이라고 하는데,
반응형 웹디자인 = 미디어 쿼리는 아니라고 한다. 이에 대한 내용은 아래에서 한번 더 언급하겠다.
출처 😕http://www.metabrain.com/responsive-web-designrwd/
특정 해상도에 최적화시킨 웹사이트는 해상도가 다른 디바이스에서 접속할 경우 위의 사진에서 보다시피 그 구조와 스타일이 흐트러지기 마련이다.
하지만 이를 미디어 쿼리로 어느정도 커버가 가능하다는 희소식!
미디어 쿼리에 대한 국내외 현황 및 예제
결론부터 말하자면, 해외에서는 이미 활발하게 연구되어 활용되고 있으며 국내에서도 그 시도가 드물지만 곳곳에 보이고 있다.
(이는 올해 중순쯤에 있었던 모 컨퍼런스의 강의에 근거한 내용과 매일 모니터링하고 있는 트렌드분석을 토대로 한 개인적인 의견임을 밝힌다.)
좀 오래된 자료이긴 하지만 NHN의 웹표준화팀 홈페이지?http://html.nhndesign.com/
미디어 쿼리를 적용한 신현석님 웹사이트?http://hyeonseok.com/
이모션에서 제작했었던 CJ제일제당 사이트의 우측영역의 유동성이 유사해 보이지만 미디어 쿼리를 이용한 것인지는 개인적으로 확인한 바 없다.
(아시는 분은 지식공유 부탁드립니다)?http://www.cj.co.kr/
미디어 쿼리를 적용한 예제사이트만 따로 모아놓은 러블리한 사이트!!?http://mediaqueri.es/
관련자료 및 예시 사이트 (출처 : NHN 웹표준화팀 홈페이지)
http://www.w3.org/TR/css3-mediaqueries/?: 실제 CSS3의 표준을 제정하고 있는 w3에서 제공하는 미디어쿼리 매뉴얼입니다.
http://webdesignerwall.com/tutorials/css3-media-queries?: 활용 예제와 예시 사이트
http://hicksdesign.co.uk?: 브라우저 사이즈를 줄여보면 레이아웃이 변경됩니다.
http://colly.com?: width에 따라 한줄에 나오는 리스트 수가 달라집니다.
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html?: width에 따라 레이아웃이 변경됩니다.
http://html.nhndesign.com?: 웹표준화팀의 홈페이지입니다. 역시 width에 따라 컨텐츠의 배치가 달라지며, 모바일에서도 내용이 쉽게 파악되도록 레이아웃이 바뀝니다. 🙂
NHN 웹표준화팀 홈페이지에 상세한 내용이 있으니 좀 더 관심있는 분은 여기로 ->?http://html.nhncorp.com/blog/textyle/42284
미디어 쿼리의 효용성 논란과 한계
위에서도 잠깐 언급했다시피 미디어 쿼리에 대한 효용성 논란은 계속 있어 온 듯 하다.
그 내용을 잠깐 살펴보면 아래와 같다.
– 개발에 있어서 CSS 대응과 큰 차이가 없다는 점
– 단순 사이트에서나 가능하지 대용량 데이터 처리가 필요한 사이트에는 적합하지 않다는 지적
– 하지만, 특정 Framework을 지칭하는 것이 아니고 방법론
– 즉, 단순한 CSS 대응을 포함하여 리소스(이미지, 동영상, 사운드)에 대한 Device 대응을 가능하게 하는것
– Responsive Web Design = CSS3 media queries 가 아님
출처 😕http://jfactory.tistory.com/512
[참고서적]
그리고 신현석님 블로그에서 언급한 바와 같이?만들어진 이후 유지 비용도 고려해야 하고
새로운 단말기가 나올 때마다 기민하게 대응해야 하는 방법이라는 것이 한계로 작용될 수도 있지 않을까 생각된다.