티스토리 뷰

IT 이야기/프로그래밍

[모바일] 모바일 페이지 개발시 기본 소스

하늘과 나b 2012. 8. 27. 07:53

모바일 페이지 개발시 기본 소스


아래의 내용은 모바일 페이지 소스 중 기본 소스입니다.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> 
<link rel="apple-touch-icon" href="이미지경로.png" /> 
<script type="text/javascript"> 
<!-- 
// 주소창 자동 닫힘 
window.addEventListener("load", function(){ 
setTimeout(loaded, 100); 

}, false); 

function loaded(){ 
window.scrollTo(0, 1); 
} 
//--> 
</script> 
</head> 

<body>
해당 소스 입력(웹페이지와 동일) 
</body> 
</html>


나머지는 해당 소스 입력 부분에 입력하시면 됩니다.
그러면 PC에서 보이는 웹 환경과 무엇이 다른지 알아보도록 하겠습니다.



기존의 웹 소스와 모바일 웹 소스에서 다른 점?

 

1. 모바일 웹에서는 head 태그 안에서  추가되는 부분이 있습니다.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, width=device-width" />



위 소스를 추가할 경우 무엇이 다를까요?

위 소스를 추가하면 모바일 화면의 크기가 고정이 됩니다. 즉, 가로 스크롤이 생기지 않습니다. 물론 css를 통해서 가로 사이즈를 고정시켜주는 것은 잊지 말아야 합니다. 


2. 바탕화면 아이콘 추가 

이 소스는 아이폰이나 아이패드, 아이팟터치등에 애플 계열에 사용되는 부분으로 소스는 다음과 같습니다. 

<link rel="apple-touch-icon" href="이미지경로.png" /> 

 
사파리로 북마크를 해서 바탕화면으로 보낼때 사용되는 아이콘를 정해주는 것입니다.
주의해야될 점은 꼭 png파일로 저장을 해주셔야 합니다.  


3.  주소창 자동숨기는 소스

<script type="text/javascript"> 
<!-- 
// 주소창 자동 닫힘 
window.addEventListener("load", function(){ 
setTimeout(loaded, 100); 

}, false); 

function loaded(){ 
window.scrollTo(0, 1); 
} 
//--> 
</script> 

 

위의 자바스크립트를 이용하면 주소창이 자동으로 숨겨지게 됩니다.
물론 터치를 통해서 보이게 할 수도 있습니다.


이상으로 모바일웹 페이지를 개발할 때 사용되는 기본적인 HTML 소스에 대해 알아 보았습니다.
모바일웹을 시작하실때 이부분은 기본으로 사용하시면 웹페이지 코딩할때와 다른것이 많지 않으니 
웹페이지를 응용하시면서 코딩을 하시면 될거 같습니다.


이 포스팅은 http://rhtmdaud.ivyro.net/V2/page/page.php?bo_table=mo01&wr_id=276 의 내용을 정리한 것입니다. 더 자세한 정보는 위 사이트를 참고해 주세요

 

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[C++] 자음-모음 개수 세기  (0) 2012.10.07
Visual Studio 2010에서 C언어 프로그래밍 환경 한번에 만들기  (4) 2012.10.04
[Javascript] 안드로이드 브라우저 User-Agent 이슈  (2) 2012.10.03
[PHP] 리다이렉션(페이지이동)의 3가지 방법  (0) 2012.09.08
알툴바 막는 스크립트 소스  (7) 2012.09.04
Turbo C++ 헤더파일을 Visual C++에서 사용하기  (0) 2012.06.02
[프로그래밍 문제] C언어 문제 - 포인터와 사칙연산  (0) 2012.06.01
[프로그래밍 문제] 디코딩  (0) 2012.06.01
[C++] 숫자를 입력받아 그 수가 소수인지 판별하는 프로그램  (2) 2012.05.23
[C언어 소스] 가장 간단한 2진수 출력 소스  (0) 2012.05.15
공유하기 링크
댓글