CSS3 09

하이브리드 애플리케이션

-> HTML5를 사용해 한 번만 개발하면 모든 운영체제에서 샐항할 수 있다는 장점, 게임을 제외한 대부분의 애플리케이션 제작 가능

모바일 웹 페이지

- 자바 스크립트, jQuery Mobile, Sencha Touch 공부

- 주의 사항

1. 대부분 overflow 속성을 사용해 scroll 키워드를 넣을 수 없다.

-> 스크롤이 구현되어 있는 부분은 자바스크립트로 제작한 것

2. 상태 선택잘르 사용할 때 주의

-> 터치를 사용하므로 화면 누르는 순간 바로 클릭 적용, hover 상태 선택자와 active 상태 선택자를 사용할 때 주의

3. 동위 선택자에 제한

-> 대부분의 스마트폰 웹 브라우저는 ~ 선택자를 지원하지 않습니다.

4. 안드로이드 2, 3 버전의 웹 브라우저는 CSS3 그레이디언트 적용 불가

-> 그레디언트 적용 불가로 이미지를 사용해 그레이디언트 제작

- 뷰포트 meta 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no, target-densitydpi=medium-dpi"/> <- Naver 뷰포트 meta

-- width : 화면의 너비

ex) width = 240, width = device-width

-- height : 화면의 높이

ex) height = 800, height = device-height

-- initial-scale : 초기 확대 비율

ex) initial-scale = 2.0

-- user-scalable : 확대 및 축소의 가능 여부

ex) user-scalable = no

-- minimum-scale : 최소 축소 비율

ex) minimum-scale = 1.0

-- maximum-scale : 최대 축소 비율

ex) maximum-scale = 2.0

-- target-densitydpi : DPI 지정

ex) target-densitydpi = medium-dpi

-> 웹 브라우저에 특별한 정보를 제공하는 HTML 태그, 화면에 대한 특별한 정보 제공, 브라우저의 화면 설정과 관련된 정보를 제공

- 안드로이드 meta 태그

http://developer.android.com/guide/webapps/targeting.html

- 아이폰 meta 태그

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html