1. 모바일 페이지 작성시 사파리로 테스트 방법
1) 스마트폰으로 직접 페이지 열어보기
2) 사파리 브라우저를 이용한 개발자 도구 이용하기
위의 URL에서 웹브라우저 인스톨러를 다운로드 받습니다.
인스톨 하시고 나서 오른쪽 상단에 톱니바퀴같은것을 보실수 있습니다.
이 톱니 바퀴를 선택하시면 여러개의 메뉴가 보이고 "기본설정.."이라는것을 선택하시면
새로운 창에 여러가지가 뜹니다. 그중에 고급 아이콘을 클릭하시면 하단에
"메뉴 막대에서 개발자용 메뉴 보기"라는 것에 체크박스를 표시합니다.
그리고 나서 네모난 종이같은 아이콘은 상단 에서 클릭하면
"개발자용"이라고 메뉴가 새로 보이는 것을 확인할수 있습니다.
"개발자용"을 클릭하시고 "사용자 에이전트"를 아이폰 또는 아이패드 등으로 설정하시면
해당 device에 최적화한 화면으로 보실수 있습니다.
개발하실때 인터넷 익스플로러를 띄우셔서 자신의 일반 웹사이트를 확인하시고
사파리 웹브라우져에서는 "아이폰" 또는 "아이패드"를 확인하면서 작업하시면됩니다.
2. 포토샵에서 디자인 먼저하기
480 x 320 에 안에 디자인 하기
http://www.vcarrer.com/2010/06/iphone-grid-system.html
http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
모바일 웹페이지를 만들때 CSS에서 주의하여야 할것
3. 모바일 웹페이지에 css 적용(다음의 모바일 웹 css 에서 찾음)
아래의 css를 긁어서 .css화일을 만들기
-----------------------------------------------
/* base */
body {
margin: 0;
padding: 0;
background-color: #fff;
-webkit-text-size-adjust: none;
}
img, fieldset {
border:0 none;
}
dl, ul, ol, li {
list-style: none;
}
hr {
display:none;
}
h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, blockquote, form, fieldset, legend, body {
margin: 0;
padding: 0;
font-family: '돋움', 'Dotum', '굴림', 'gulim', 'Helvetica', 'Apple-Gothic';
font-size: 15px;
} /* font-size는 달라짐 */
a {
text-decoration: none;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
color:#333;
}
a:link, a:hover, a:active {
text-decoration: none;
}
input, select, textarea {
font-size: 100%;
vertical-align: middle;
}
em {
font-style:normal;
}
/* layout */
body {
margin: 0;
padding: 0;
background-color: #fff;
-webkit-text-size-adjust: none;
letter-spacing:-1px;
}
-----------------------------------------------
모바일웹페이지의 head 부분에 external css로 삽입니다.
<!-- 모바일 css 삽입 -->
<LINK REL="stylesheet" HREF="m_sun_hp.css">
4. 모바일 웹 홈 아이콘 만들기
<head> 부분에 아래의 메타태그를 삽입할것
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<link rel="apple-touch-startup-image" href="startup.png" />
http://visualcommunication.tistory.com/entry/웹디자인2-아이폰-아이콘-PSD
이미지를 png 화일로 저장해야 함을 잊지마세요!
모바일 웹페이지 html 화일과 같은 폴더안에 두세요.
5. 모바일 브라우저와 일반 브라우저 연결 구분 방법
자신의 PC 웹페이지 index.html <head> </head> 사이에 삽입합니다.
<script type="text/javascript" src="detectmobilebrowser.js"></script>
이때 아래의 detectmobilebrowser.js를 아래에서 다운받아서 메모장으로 열어서 빨간색으로 표시한 부분을 자신의 웹호스팅내의 모바일웹.html 화일주소로 수정합니다.
<script type="text/javascript" src="detectmobilebrowser.js"></script>
이때 아래의 detectmobilebrowser.js를 아래에서 다운받아서 메모장으로 열어서 빨간색으로 표시한 부분을 자신의 웹호스팅내의 모바일웹.html 화일주소로 수정합니다.
주의! 업로드 하는 .js 화일의 확장자에 .txt가 붙어 있는지 확인하고 붙어있으면 제거 합니다!
detectmobilebrowser.jsdetectmobilebrowser.js화일 내용
-----------------------------------------
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
-----------------------------------------
4) 빨간 글씨 자신의 모바일 메인페이지로 수정
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
-----------------------------------------
4) 빨간 글씨 자신의 모바일 메인페이지로 수정
.js 화일에서 위에 표시된 붉은색 글씨 영역 'http://detectmobilebrowser.com/mobile'부분을 자신의 모바일 홈페이지 URL로 대신 쳐넣습니다.
5) 소스 다운로드는 http://detectmobilebrowser.com/ Open source mobile phone detection
.js 화일 / pc 용 웹페이지 index.html / 웹용 웹페이지 m_index.html 을 자신의 홈페이지 제작을 위한 FTP에 업로드 합니다.
6. 무료 호스팅 신청하기
http://dothome.co.kr/web/free/index.php
무료호스팅 공간만 신청해서 자신의 화일들을 ftp를 이용하여 업로드 합니다.
신청방법
http://ilryu.tistory.com/113
파란의 무료 웹호스팅
http://bizfree.paran.com/helper/h/h_man_list.html
파란 웹호스팅 - FTP 접속/업로드 방법
http://visualcommunication.tistory.com/entry/파란-웹호스팅-FTP-접속업로드-방법
http://www.mireene.com/index.php?pid=free_hosting/content
한달간 무료 호스팅 신청할수 있는곳
7. ftp로 업로드 하기
프리웨어 ftp 프로그램을 다운로드 받는다.
파일질라
http://filezilla-project.org/download.php
알FTP
http://www.altools.co.kr/Product/ALFTP_Intro.aspx
5) 소스 다운로드는 http://detectmobilebrowser.com/ Open source mobile phone detection
.js 화일 / pc 용 웹페이지 index.html / 웹용 웹페이지 m_index.html 을 자신의 홈페이지 제작을 위한 FTP에 업로드 합니다.
6. 무료 호스팅 신청하기
http://dothome.co.kr/web/free/index.php
무료호스팅 공간만 신청해서 자신의 화일들을 ftp를 이용하여 업로드 합니다.
신청방법
http://ilryu.tistory.com/113
파란의 무료 웹호스팅
http://bizfree.paran.com/helper/h/h_man_list.html
파란 웹호스팅 - FTP 접속/업로드 방법
http://visualcommunication.tistory.com/entry/파란-웹호스팅-FTP-접속업로드-방법
http://www.mireene.com/index.php?pid=free_hosting/content
한달간 무료 호스팅 신청할수 있는곳
7. ftp로 업로드 하기
프리웨어 ftp 프로그램을 다운로드 받는다.
파일질라
http://filezilla-project.org/download.php
알FTP
http://www.altools.co.kr/Product/ALFTP_Intro.aspx