번역 : bellamy.chang([email protected] , izect.kr)
들어가며
요즘 모바일 웹 개발은 화재입니다. 스마트폰이 PC보다 더 많이 팔리게 되면서 더 많은 사용자들이 모바일 장치를 통해 웹서핑을 하고 있고 이것은 개발자들에게 그들의 사이트를 모바일 웹 브라우저에 맞추게 되는 중요한 원인을 제공할 것입니다.
“모바일” 전장은 아직 수 많은 개발자들의 미지의 물과도 같습니다. 대부분의 사이트들은 모바일 유저를 배제하고 있습니다. 대신, 웹 사이트들은 기본적인 데스크톱 브라우저나 형편없는 모바일 브라우저 사이트로 디자인 되었습니다. html5rocks.com 같은 사이트도 예외는 없으므로 이를 간단한 노력만으로 모바일 버전의 사이트를 만들어 봅시다.
모바일 친화적인 html5rock.com 사이트 만들기
이 강의에서는 html5rocks 사이트를 모바일 친화적 버전으로 만들면서 흥미로운 사이트로 만들 것입니다. 그리고 주로 사용되는 스마트 폰에 타겟을 맞춰보겠습니다. 이 강의의 목표는 새로운 모바일 사이트를 만드는 것이 아닙니다. 그렇게 되면 쓸때없는 시간이 많이 낭비됩니다. 우리는 이미 사이트 구조(마크업)를 정의해 두었습니다. CSS로 룩앤필도 설계해 두었고, 기능적인 JS 함수도 있습니다. 대부분의 사이트들이 이정도는 기본으로 갖추고 있습니다.
이 글에서는 어떻게 html5rocks를 안드로이드와 아이폰에 최적화된 모바일 사이트를 만드는 방법을 보여줍니다. 스마트폰에서 단순히 html5rocks.com을 로드하면 각 OS에 따라 다른 사이트르 보여줍니다. m.html5rocks.com 으로 리다이렉트 된다든가의 잡다한 기능은 기본적으로 없습니다. 이처럼 모바일 버전에서는 최적화된 사이트의 모습과 기능적인 동작 등을 모바일 장치에서 잘 보이고 동작하게 하는 것입니다.
html5rocks.com의 데스크탑버전(왼쪽)과 모바일 버전(오른쪽)
CSS 미디어 쿼리
HTML4와 CSS2에서는 미디어 독립적인 스타일 시트를 아래와 같이 제공합니다.
<link rel="stylesheet" media="print" href="printer.css">
이 테그는 목표가 되는 장비와 화면에 출력될 떄의 정의된 컨텐츠 스타일을 가져옵니다. CSS3은 미디어 타입보다 한단계 나아가, 미디어 쿼리와 함께 강화되었습니다. 미디어 쿼리는 허용된 스타일 시트를 더 세심하게 확장합니다. 미디어 쿼리를 사용함으로써 굳이 컨텐츠 자체를 바꾸지 않아도 디바이스에 맞게 컨텐츠들이 조절됩니다. 기존 레이아웃을 바꾸는데는 꼭 필요해 보이지 않습니까!
미디어 쿼리를 사용하면 디바이스 스크린의 가로세로 크기, 오리엔테이션(디바이스의 가로/세로 상태) 등등의 미디어 속성을 사용할 수 있습니다. W3C 미디어 쿼리 스펙 문서에서 모든 리스트를 볼 수 있습니다.
스크린 사이즈에 맞게 타겟팅
이 예제에서는 phone.css가 손바닥 크기나 320px보다 작은 디바이스의 가로 사이즈에 맞게 적용시켜 줄 것입니다.
<link rel="stylesheet"
media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
미디어 쿼리에 only라는 키워드는 CSS3이 호환되지 않는 브라우저는 이를 무시하게 됩니다.
아래는 스크린 사이즈를 641px x 800px 로 맞춘 것입니다.
<link rel="stylesheet"
media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
미디어 쿼리는