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

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

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

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

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 들으면서 마치도록 하겠습니다.
감사합니다.

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

관련 포스트(Related posts)

1. 네이버, 검색 페이지 UI 변경(시퀀스 검색 적용)
2. 애플의 HTML5 데모 사이트 – Safari Technology Demos
3. HTML5 오픈 컨퍼런스 열린다. * 2010년 7월 2일