반응형
CSS3 미디어 쿼리는 웹의 미래에 있어서 중요한 의미를 갖습니다. Device의 종류 별로만 스타일을 다르게 줄 수 있었던 이전과는 달리 Device 각각에 맞춰서 스타일에 변화를 줄 수 있기 때문입니다. 그 배경에는 웹에 접근할 수 있는 장치의 다양성이 점점 커지는 현상과, 이렇게 다양한 장치에서의 뷰를 효과적으로 컨트롤 할 수 있느냐에 대한 고민에서 시작되었습니다.
그리고 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.js
다운로드

다음으로 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) 스크립트 라이브러리를 사용하시면 됩니다.

출처 : http://selectivizr.com/

<!--[if (gte IE 6)&(lte IE 8)]><![endif]-->
selectivizr.js
다운로드

위와 같이 적용하여 만들 경우 간결하고 시멘틱한 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 기본 틀을 완성하게 되는 것입니다.

반응형
반응형

 

블루웨이브 홈페이지 개편 배경(http://www.bluewaves.co.kr)

N스크린은 디바이스 간 연동으로 컨텐츠를 다양하게 볼 수 있는 개념으로 스마트폰 대중화화 더불어 각광을 받기 시작했고, 태블릿PC 사용자들이 늘어남에 따라 더욱 주목을 받기 시작했습니다. 전문가들은 N스크린 시대의 도래는 진정한 콘텐츠의 시대의 도래를 의미한다고 말하며 콘텐츠 시대의 도래는 콘텐츠가 시스템에 종속되는 것이 아니라 콘텐츠를 위해 나머지 시스템이 존재하는 콘텐츠 중심의 생태계 재편으로 연결될 것이라고 말하고 있습니다.
그렇다면 지금 업체들의 가장 큰 고민은 N-screen에 대응하는 것입니다. 즉 컨텐츠를 하나를 만들어서 다양한 형태의 화면사이즈, 모바일폰, 태블릿, TV 에 대응이 되어야 한다는 것입니다. 웹기술의 엄청난 강점인 Cross platfom 이나 Cross device 대응은 이제 기본입니다.
이제는 한번 만든 컨텐츠를 다양한 크기의 화면에 어떻게 대응 될것이냐가 정말 중요한 토픽입니다. 그런데 이런 문제를 해결해 주는 거의 유일한 기술이 바로 웹기술(MediaQuery)이라는 점이 우리 웹퍼블리셔의 전망을 밝게 해주어 필자는 퍼블리셔로서 자긍심을 더욱더 가지게 합니다.
현재 아이패드, 갤럽시 탭과 같은 태블릿이 나오면서 기존의 앱개발자들은 화면 해상도 대응하는 것에 지금 비상이 걸렸습니다.
그런데 우리 웹기술(html5 Media Query)에는 이미 이런 내용들이 모두 준비되어 있습니다.
그리하여 우리나라에는 아직 많이 사용되지 않은 Media Query를 사용하여 N-Screen을 보여 드리고자 이렇게 개편하게 되었습니다.

Media Query를 이용한 Responsive Web Design 구현

웹서비스 사업자들의 고민은 스마트폰만이 아닙니다. Connected Device들이 다양해지면서 대응해야 할 전략과 개발 리소스는 급증있고 이에 대표적인 Device가 Smart Pad입니다. Blaze의 최근 보고서에 의하면 iPad의 경우 97%의 사이트가 PC Web으로 대응을 하고 있지만, Honey Comb이 탑재되어 있는 XOOM은 32%의 사이트가 Mobile Web으로 대응을 하고 있는 것으로 알려져 있습니다. 앞으로 이런 단편화 현상은 더욱 심화될 것입니다.
이런 고민을 해결하고자 최근 많이 도입되고 있는 것이 바로 'Responsive Web Design(반응형 웹)' 입니다. Responsive Web Design은 Screen Size, Orientation 등 divice 환경에 반응하여 최적화된 웹페이지를 제공하는 것을 말합니다.
그리하여 새로운 기술을 보여드리고자 탄생하게 된것이 블루웨이브 반응형 웹사이트입니다.

블루웨이브 Responsive Web(반응형웹) Media Query 표현기법

그렇다면 간단하게 블루웨이브 반응형웹 사이트의 표현기법에 대해 알아보겠습니다.
HTML5는 차세대 웹표준스펙적용을 선행적으로 수행하였고 CSS3는 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 적용
}

블루웨이브 반응형 웹사이트는 크게 Mibile Device 해상도를 고려한 위 첫번째 미디어쿼리를 적용하였고, Tablet Device 해상도를 고려한 위 두번째 미디어쿼리를 적용, DeskTop 해상도를 고려한 위 세번째 미디어쿼리를 적용하여 작업하였습니다.

앞으로 Media Query의 미래

현재 시점에서 Responsive Web(반응형웹)의 효용성에 대해 논란도 존재합니다.
하지만 Responsive Web(반응형웹)은 특정 Framework을 지칭하는 것이 아니고 방법론입니다.
Responsive Web은 단편화가 심화되고 있는 Web 환경을 대응할 수 있는 좋은 해결책이라고 생각합니다. 그리고 앞으로 2년후에는 많은 사이트들이 Responsive Web(반응형웹)으로 만들어진 사이트들이 트렌드가 될 것같은 생각도 듭니다. 마지막으로 효용성을 고려한 최근에 나온 Responsive Web으로 만들어진 해외 사이트 두개를 아래와 같이 보여드리며 글을 마치겠습니다.

반응형

+ Recent posts