위에서 퍼온 글입니다 . Web 개발자면 한번 봐야할듯 하네요
Mobile first strategy for CSS designer.
마지막으로 블로그에 글을 포스팅 했던 날짜가 작년 여름이네요. 오늘 주제는 CSS 디자이너를 위한 모바일 퍼스트 전략 인데요. 작년에 썼던 'HTML5 & Responsive Web Design' 포스팅과 관련이 있습니다. 모바일 퍼스트 전략이라는 것은 IT 기업들 입에 자주 오르내리는 단어 인데요. 이 개념은 CSS 개발에도 적용할 수 있습니다. 말 그대로 모바일 우선 전략입니다. 2013년 말 또는 2014년 초에는 모바일 인터넷 사용자가 데스크탑 인터넷 사용자를 앞지를 것이라는 전망이 우리를 두근거리게 만들고 있습니다. CSS 디자이너를 위한 모바일 퍼스트 전략이란 무엇인지 알아보죠.
CSS3 Media Queries
여러분이 CSS3를 배울 기회가 있었다면 다음과 같은 코드 @media (조건문) {실행문} 으로 무엇을 할 수 있는지 알 수 있습니다. CSS3 미디어 쿼리를 이용하면 모바일 환경의 뷰와 데스크탑 환경의 뷰를 원하는 해상도에 따라 완벽하게 분기 처리할 수 있습니다. 단 하나의 HTML 문서만가지고 말입니다.
@media (max-width:799px) { ... CSS for Mobile ... } /* 이 코드는 799px 이하의 해상도에서 해석 됩니다 */
@media (min-width:800px) { ... CSS for Desktop ... } /* 이 코드는 800px 이상의 해상도에서 해석 됩니다 */
현존하는 최신 버전의 브라우저들은 CSS3 미디어 쿼리를 잘 지원하기 때문에 문제가 없지만 이 코드는 두 가지 문제가 있습니다. 첫째, 미디어 쿼리를 지원하지 않는 모바일 브라우저에 적용되지 않습니다. 둘째, 미디어 쿼리를 지원하지 않는 데스크탑 브라우저에 적용되지 않습니다. 두 가지 문제를 하나씩 풀어 보도록 하지요.
Mobile First CSS
미디어 쿼리를 지원하지 않는 모바일 브라우저에 대응하기 위해 저는 다음과 같이 코드를 작성 했습니다. 모바일에 대응하기 위한 코드를 미디어 쿼리 밖에 작성한 것입니다.
... CSS for Mobile ...
@media (min-width:800px) { ... CSS for Desktop ... }
이것으로 첫 번째 문제를 해결 했습니다. 미디어 쿼리를 지원하지 않는 모바일 브라우저는 미디어 쿼리 조건문 밖에 있는 코드를 해석합니다. 미디어 쿼리 구문은 지원하지 않으므로 해석하지 않습니다. 미디어 쿼리를 지원하는 모바일 브라우저는 해상도가 800px이 넘지 않는 이상 미디어 쿼리 구문을 해석하지 않습니다. 조건에 맞지 않으니까요. 미디어 쿼리 지원 여부에 관계 없이 799px 이하의 해상도를 지닌 모든 브라우저는 모바일용 CSS 코드만 해석합니다. 간단 명료하죠? 한편 미디어 쿼리를 지원하지 않는 IE 6~8 브라우저에서는 어떻게 보일까요?
IE 6, 7, 8 Compatibility
미디어 쿼리를 지원하지 않는 데스크탑 브라우저(IE 6~8)는 모바일 퍼스트 CSS 코드만 해석하기 때문에 모바일 뷰로 보일 것입니다. 낡은 데스크탑 브라우저가 미디어 쿼리문을 바르게 해석하도록 하기 위해 저는 다음과 같이 CSS3 미디어 쿼리 활성 스크립트를 HTML 문서에 추가 했습니다.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
IE 조건부 주석 'if lt IE 9 = if less than IE 9 = IE 9 미만이면 해석'을 사용하여 IE 9 보다 버전이 낮은 브라우저에서만 이 스크립트를 해석하게 됩니다. 표준계열 브라우저는 이 부분을 주석으로 처리하죠. 이제 IE 6~8 브라우저는 미디어 쿼리 구문을 올바르게 해석할 수 있게 됐습니다. 간단 명료하죠?
Tip 1: Performance Improvement
미디어 쿼리를 이용하여 데스크탑용 배경 이미지(background-image)와 모바일용 배경 이미지를 다르게 설정해 보세요. 미디어 쿼리를 이용하여 해상도별로 배경 이미지를 다르게 설정하면 다른 해상도에 필요한 배경 이미지는 서버로 전송 요청하지 않습니다. 즉, 특정 해상도에서 필요로하는 이미지만 요청(http request)하므로 미디어 쿼리를 통해 네트워크 자원을 아낄 수 있습니다. 웹 브라우저 개발자 도구의 네트워크(Network) 탭을 통해서 직접 확인해 보세요.
Tip 2: Override Mobile by Desktop CSS
모바일 퍼스트 CSS 코드는 낮은 해상도의 모바일용 브라우저에서만 해석하는 것이 아니라 높은 해상도의 데스크탑 브라우저에서도 동시에 해석하게 됩니다. 따라서 미디어 쿼리 조건문 안에서는 데스크탑용 CSS 코드가 모바일용 CSS 코드보다 더 높은 우선순위를 가질 수 있도록 덮어쓰기 하는 작업이 필요합니다. 손이 많이 갈것 같지만 모바일용 코드는 비교적 단순하기 때문에 그리 어렵지는 않을 것입니다.