그럼.. 아이폰 Web App이 가능하게 한 HTML5의 요소는 어떤 것일까요?
바로 <head> 영역에 다음의 4가지 태그를 추가함으로써 가능하게 됩니다.
<link rel="apple-touch-icon" href="/image/icon.png" />
이 부분은 웹 앱으로 등록할 아이콘을 설정하는 것입니다.
아이콘 사이즈는 기종에 따라 조금씩 다르기는 하지만 현재 아이폰 4에 맞추어 114 X 114로 저장하면 리사이징 해준다고 합니다.
<link rel="apple-touch-startup-image" href="/image/startup.png" />
웹 앱을 실행할 때, 초기 화면을 띄울 수 있도록 지정하는 것입니다.
마치 일반 앱처럼 로딩화면을 적용할 수 있습니다.
<meta name="apple-mobile-web-app-capable" content="yes" />
웹 앱으로 실행할 때, 일반 앱처럼 보이도록 사파리 브라우드의 UI를 안나타게 해주는 역할을 합니다.
<meta name-"apple-mobile-web-app-status-bar-style" content="black" />
기본 회색으로 되어 있는 상태바의 색상을 지정할 수 있습니다.
이를 통해 보여줄 컨텐츠와 적절하게 맞출 수 있게 됩니다.
반응형
'WEB' 카테고리의 다른 글
| 반응형 웹디자인 (0) | 2012.03.07 |
|---|---|
| 960-grid (0) | 2011.11.25 |
| 반응형 웹페이지 예제 (0) | 2011.11.25 |
