|
Javascript & JQuery & CSS > 모바일웹 - 페이지 기본 정리
모바일웹 코딩을 시작 할때 기본적으로 셋팅해주는 html 소스에 대해 알아보겠습니다.
모바일웹의 정의는 말 그대로 모바일에서 웹은 한다는 말입니다. 기본적으로 코딩하는 것은 웹페이지 코딩할때와 비슷합니다.
단지 메타테그를 이용하여 웹페이지가 아닌 모바일에 적합한 사이트를 만들어 주는 것이 기본적인 포인트입니다.
그럼 기본적인 html에 대해 알아보겠습니다.
1. 메타태그 설정
<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. 주소창 자동숨김
이상은 기본적으로 모바일웹을 할때의 html 소스에 대해 알아봤습니다. 모바일웹을 시작하실때 이부분은 기본으로 사용하시면 웹페이지 코딩할때와 다른것이 많지 않으니
웹페이지를 응용하시면서 코딩을 하시면 될거 같습니다.
모바일웹의 정의는 말 그대로 모바일에서 웹은 한다는 말입니다. 기본적으로 코딩하는 것은 웹페이지 코딩할때와 비슷합니다.
단지 메타테그를 이용하여 웹페이지가 아닌 모바일에 적합한 사이트를 만들어 주는 것이 기본적인 포인트입니다.
그럼 기본적인 html에 대해 알아보겠습니다.
<!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>
위의 소스가 모바일웹을 시작할때의 기본 소스가 됩니다.1. 메타태그 설정
<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 소스에 대해 알아봤습니다. 모바일웹을 시작하실때 이부분은 기본으로 사용하시면 웹페이지 코딩할때와 다른것이 많지 않으니
웹페이지를 응용하시면서 코딩을 하시면 될거 같습니다.
|
|
||||
|
이메일 문의 : cak0280@nate.com Copyright 2000 By ENTERSOFT.KR All Rights Reserved. |