그리고 W3C에서는 이런 고민들은 이전부터 해왔습니다. 이에 MediaQuery라는 것이 탄생한 것 같습니다. 그렇다면 미디어쿼리가 무엇이고, 어떻게 사용하는지에 대하여 알아 보겠습니다.
브라우저 호환성
IE8 이하 브라우저에서 HTML5 적용하는 방법
현재 IE를 제외하면 미디어 쿼리를 지원하지 않는 브라우저 찾기가 정말 어렵습니다. 크롬, 사파리, 파이어폭스, 오페라 등은 모두 HTML5와 CSS3를 지원하기 때문입니다.
그럼 MediaQuery 사용하려면 먼저 미디어 쿼리를 지원하지 않는 브라우저를 확인해야 하는데요. 먼저 인터넷 익스플로러(이하 IE) 6, 7, 8은 CSS3 미디어쿼리를 지원하지 않습니다. 그냥 전체를 인식해서 알고 있는 미디어 종류가 아니니 무시하는 것으로 생각합니다.
정리하자면 IE 8 이하 버전을 제외하면 대중적인 모든 브라우저가 미디어 쿼리를 지원합니다. 그렇다면 IE를 상대적으로 많이 쓰는 우리나라에서는 사용할 수 없는가? 하는 의문의 가지게 됩니다. 하지만 사용이 가능한 방법이 있습니다.
일단 HTML5문서의 새로운 마크업 태그인 header, section, article, footer 등을 IE8이하 브라우저 에서 사용가능하게 해야 합니다. 이 문제의 해결방법으로 구글에서 제공하는 자바스크립트 라이브러리를 사용하고, CSS를 "Block Element"속성으로 지정해 주면 IE8 이하 브라우저에서도 HTML5의 새로운 태그들이 사용 가능해집니다. 사용방법은 아래와 같습니다.
head 태그 안에 삽입해서 사용 하시면 됩니다.
첨부파일은 아래에 있습니다.
출처 : http://code.google.com/p/html5shiv/
<!--[if lt IE 9]><![endif]-->
다음으로 html5 태그를 CSS를 이용하여 "Block Element"로 만들어 줍니다.
/* HTML5 새 요소 초기화 */
article, aside, figure, figure img,
figcaption, hgroup, footer, header,
nav, section, video, object {display:block;}
위와 같이 실행했을 경우 IE8이하 버전에서도 HTML5 태그를 사용하여 Cross Browsing 할 수 있습니다.
CSS3 선택자(selector) 사용방법
가상 선택자를 사용하면 소스를 CSS를 최소화 하고 HTML문서를 더욱 시멘틱하고 간결하게 만들 수 있습니다. 그러나 IE8 이하 버전에서는 가상선택자를 대부분 지원하지 않습니다. 그래서 사용 할 수 없었으나 자바스크립트 라이브러리를 사용한다면 IE8 이하버전에서도 사용이 가능합니다.
사용방법은 http://jquery.com에서 제공하는 jQuery라이브러리와 선택자(select) 스크립트 라이브러리를 사용하시면 됩니다.
<!--[if (gte IE 6)&(lte IE 8)]><![endif]-->
위와 같이 적용하여 만들 경우 간결하고 시멘틱한 HTML5문서를 작성할 수 있으며, 모든 브라우저에서 Cross Browsing이 가능하게 될 것 입니다.
CSS Media Query 문법
@media all and (max-width:480px) {
해상도 480px이하 Size 의 css 적용 적용
}
@media all and (min-width:481px) and (max-width:1024px) {
해상도 481px이상 1024px이하 Size의 css 적용
}
@media all and (min-width:1025px){
해상도 1025px 이상 Size의 css 적용
}
저희 맑은커뮤니케이션의 경우 웹퍼블리싱 작업시 위 3가지 쿼리로 CSS문서를 작성합니다.
Media Query를 사용하는 방법은 3가지(첫째: 파일로 분기하는 방법, 둘째: 파일내에 작성하는 방법, 셋째: CSS파일내에서 작업하는 방법)가 있으나 속도를 고려 했을 경우 위와 같은 방법이 최선책입니다. 위 3가지 해상도는 모바일, 태블릿, 데스크탑, 스마트TV 및 여러 Device 넘나들수 있는 최소한의 쿼리 갯수입니다. 더 상세하게 나누는 것도 가능하나, 프로젝트는 일정이라는 시간내에 퍼블리싱을 완료해야 하므로 3개의 쿼리 CSS로 구분하였습니다.
위 방법들을 다 적용 하신다면 Media Query 기본 틀을 완성하게 되는 것입니다.
'CSS' 카테고리의 다른 글
| CSS 초보자를 위한 팁 CSS Shorthand (줄여쓰기, 속기) (0) | 2012.01.30 |
|---|---|
| CSS3 Selectors Level 1 ~ 3 (0) | 2012.01.19 |
| [웹표준코딩]CSS 폰트단위 (0) | 2012.01.11 |
| CSS 핵(hack) 정리 (2) | 2012.01.03 |
| N-Screen 종결자, HTML5 Media Query (블루웨이브 홈페이지 개편) (0) | 2012.01.02 |
