티스토리 뷰
모바일 페이지 개발시 기본 소스
아래의 내용은 모바일 페이지 소스 중 기본 소스입니다.
<!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" />
minimum-scale=1.0, width=device-width" />
위 소스를 추가할 경우 무엇이 다를까요?
위 소스를 추가하면 모바일 화면의 크기가 고정이 됩니다. 즉, 가로 스크롤이 생기지 않습니다. 물론 css를 통해서 가로 사이즈를 고정시켜주는 것은 잊지 말아야 합니다.
2. 바탕화면 아이콘 추가
위 소스를 추가하면 모바일 화면의 크기가 고정이 됩니다. 즉, 가로 스크롤이 생기지 않습니다. 물론 css를 통해서 가로 사이즈를 고정시켜주는 것은 잊지 말아야 합니다.
2. 바탕화면 아이콘 추가
이 소스는 아이폰이나 아이패드, 아이팟터치등에 애플 계열에 사용되는 부분으로 소스는 다음과 같습니다.
<link rel="apple-touch-icon" href="이미지경로.png" />
사파리로 북마크를 해서 바탕화면으로 보낼때 사용되는 아이콘를 정해주는 것입니다.
주의해야될 점은 꼭 png파일로 저장을 해주셔야 합니다.
3. 주소창 자동숨기는 소스
주의해야될 점은 꼭 png파일로 저장을 해주셔야 합니다.
3. 주소창 자동숨기는 소스
<script type="text/javascript">
<!--
// 주소창 자동 닫힘
window.addEventListener("load", function(){
setTimeout(loaded, 100);
}, false);
function loaded(){
window.scrollTo(0, 1);
}
//-->
</script>
위의 자바스크립트를 이용하면 주소창이 자동으로 숨겨지게 됩니다.
물론 터치를 통해서 보이게 할 수도 있습니다.
이상으로 모바일웹 페이지를 개발할 때 사용되는 기본적인 HTML 소스에 대해 알아 보았습니다.
모바일웹을 시작하실때 이부분은 기본으로 사용하시면 웹페이지 코딩할때와 다른것이 많지 않으니
물론 터치를 통해서 보이게 할 수도 있습니다.
이상으로 모바일웹 페이지를 개발할 때 사용되는 기본적인 HTML 소스에 대해 알아 보았습니다.
모바일웹을 시작하실때 이부분은 기본으로 사용하시면 웹페이지 코딩할때와 다른것이 많지 않으니
웹페이지를 응용하시면서 코딩을 하시면 될거 같습니다.
이 포스팅은 http://rhtmdaud.ivyro.net/V2/page/page.php?bo_table=mo01&wr_id=276 의 내용을 정리한 것입니다. 더 자세한 정보는 위 사이트를 참고해 주세요
이 포스팅은 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 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- MBTI 검사
- 효과음
- 소스코드
- 소스
- 예제 소스
- C언어 문제
- 안드로이드
- C언어
- JavaScript
- 인터넷 익스플로러
- MBTI
- MBTI 자료
- 강좌
- 스마트폰
- 모토로이
- C
- 성공
- 프로그래밍 문제
- 프로그래밍
- It
- MBTI 테스트
- php
- C언어 소스
- 리뷰
- 안드로이드 어플 추천
- 강의
- HTML
- 인터넷
- 안드로이드 어플
- MBTI 강좌
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함