아이폰이 국내에 들어오고, 스마트폰 시장이 대폭 활성화되었고,
앞으로도 스마트폰 비율은 어느정도 수준까지 더 올라가게 될 것 같습니다.
특히 안드로이드의 상승세, 윈도우 폰 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);
아직 부족한 점들이 많이 있는 것 같은데요.
시작에 불과할 뿐이고요.
추후에 계속해서 정리해보도록 하겠습니다.
출처 : http://hyunsik.me/wordpress/?p=2060
'모바일웹' 카테고리의 다른 글
| ★ html5 모바일웹 ★ HTML5가 바꿔가는 애플리케이션 세상 (0) | 2011.05.10 |
|---|---|
| ★ html5 모바일웹 ★ “탈옥없이 아이폰 앱 설치하자”…HTML5 기반 사설 앱스토어 등장 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ 차세대 웹표준 HTML5, 인터넷 혁신 예고 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ HTML5를 사용하여 모바일 장치 웹 애플리케이션 작성하기 (0) | 2011.05.10 |
| ★ html5 모바일웹 ★ HTML5 문서구조와 새로운 요소들 (0) | 2011.05.10 |
