아이폰 웹 개발을 위한 HTML5 와 자바스크립트
2010년 03월 02일에 작성된 포스트입니다.

아이폰이 국내에 들어오고, 스마트폰 시장이 대폭 활성화되었고,
앞으로도 스마트폰 비율은 어느정도 수준까지 더 올라가게 될 것 같습니다.
특히 안드로이드의 상승세, 윈도우 폰 7의 등장 등을 바라봤을 때는
스마트폰 비율이 급상승 하지 않을까 하는 조심스러운 관측도 해봅니다.

때문에 모바일 어플(앱)과 모바일 웹에 관심이 고조되고 있는 분위기인데요.
모바일 웹 코딩과 관련된 HTML, 자바스크립트들이 많이 등장하고 있습니다.
거기에 HTML5 도 등장하여 각종 이슈를 만들어내고 있지요.
바로 보기 : 아이폰에서의 플래시 동작 예제 : HTML5 이용

글을 쓰고 있는 저도 모바일 웹에 흥미가 생겨서 모바일 웹에 중요한
몇 가지 태그와 자바스크립트를 정리해보았습니다.

1. 문서 선언부(HTML5 + 모바일 웹을 위한 기본 메타 태그)
(첫번째 메타 : 확대/축소 불가능 하도록 합니다.)
(두번째 메타 : 가로세로 길이를 디바이스에 맞춰 최대 사이즈로 지정합니다.)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;” />
<meta name=”viewport” content=”height=device-height,width=device-width” />
</head>

2. 위치 찾기 자바스크립트
(테스트 : 아이폰 – 위도와 경도의 좌표를 반환합니다.)

function getLoc() {
navigator.geolocation.getCurrentPosition(getLocation, _fail, {timeout:10000});
}
function getLocation(pos) {
alert(“현재 위치 : ” + pos.coords.latitude + “:” + pos.coords.longitude);
}
function _fail() {}
getLoc();

3. HTML5 상에서 input태그에 대한 여러가지 타입들
(테스트 : 아이폰 – 종류에 따른 키보드 활성화-range 태그는 아직 지원하지 않는 것으로 보이네요.)

<input type=”date” />
<input type=”week” />
<input type=”datetime” />
<input type=”time” />
<input type=”number” />
<input type=”range” />
<input type=”email” />
<input type=”url” />

4. 전화 걸기
(테스트:아이폰)

<a href=”tel:전화번호”></a>

5. 아래로 스크롤하여 주소창(툴바)를 보이지 않도록 합니다.
(테스트:아이폰)

window.addEventListener(‘load’, function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);

아직 부족한 점들이 많이 있는 것 같은데요.
시작에 불과할 뿐이고요.
추후에 계속해서 정리해보도록 하겠습니다.

Usher 의 What’s a man to do 들으면서 마치도록 하겠습니다.
감사합니다.

오래된 영상(object 방식) : 원본이 삭제된 경우, 지원되지 않을 수 있습니다.

– 바로보기 –
구글 MAP 3에 대한 설명
아이폰에서의 플래시 동작 예제 : HTML5 이용

Copyright © 현식로그


 


3 Comments
  1. […] http://hyunsik.me/wordpress/?p=2060 Categories: mobile Tags: 댓글 (0) 엮인글들(trackbacks) (0) 댓글 남기기 글엮기(trackback) […]

  2. 모바일 페이지 만드는중이였는데, 정보 잘 보고 갑니다. 이후 업데이트도 기대되네요

  3. 감사합니다. ^^
    요즘 너무 바쁜 나머지 포스팅을 못하고 있는데,
    조금만 한가해지면 계속해서 모바일 웹 관련 포스팅을 하도록 할께요~

    최고!

읽어주신 것만으로도 분명히 감사합니다. 글을 남겨주시면 더욱 잊지 못할 것입니다.