모바일홈페이지제작 모바일홈페이지만들기 모바일 홈페이지 쉽게 만들기(2)
두번째 시간 입니다. 전 포스팅은 모바일홈페이지만들기위해서 필요한 준비물은 알려드렸습니다.
모바일홈페이지제작 도 일반홈페이지 제작과는 다르지는 않습니다.
그렇기 때문 기본적인 HTML 부터 공부 하신후 jquery mobile 을 배우시면 모바일 홈페이지를 구축할수 있습니다.
HTML , jquery mobile 로는 간단한 홈페이지 틀만 만들수 있습니다.
게시판이나 로그인 ,회원가입 을 만들려면 서버스크립트도 공부하셔하구요..
서버스크립트는 PHP , ASP ,JSP 가 있겠습니다.. 저는 PHP 로 게시판을 만들었습니다.
오늘은 모바일 홈페이지 만들기 (2) 탄 모바일홈페이지 기본 틀을 만들어 보겠습니다...
모바일홈페이지를 만들려면 html ,jquery 어느정도 다룰줄 아셔야 하구요
모바일 홈페이지 만들기 위한 준비밀 포스팅 http://gby05.tistory.com/1603 여기 참고해주세요.
참고로 홈페이지가 하루아침에 만들어지는것이 아니고 진짜 열심히 공부해야 만들수 있습니다. 그만큼 많은 노력이필요합니다....
먼저 모바일 홈페이지를 만들기 위해서 에디터 플러스를 다운받아주세요..
http://www.editplus.com/kr/download.html 에이터플러스는 html 편집기 입니다.. 메모장으로 도 홈페이지를 만들수 있지만
저는 에디터플러스를 사용하면 편리합니다.
일반 홈페이지 제작 할때 사용하는 HTML 태그
<html>
<head>
<title> 일반홈페이지 </title>
</head>
<body>
달리는 꼬부귀 의 홈페이지 제작 강좌 ^^;;
</body>
</html>
모바일 홈페이지 제작할 때 사용하는 HTML 태그
<!doctype html>
<html>
<head>
<title> 모바일 홈페이지 </title>
</head>
<body>
달리는 꼬부귀 의 홈페이지 제작 강좌 ^^;;
</body>
</html>
위에 두 소스를 비교해보시면 아시겠지만 모바일 홈페이지에서는 맨상단에 <!doctype html> 가 추가된것을 볼 수있습니다.
jquery mobile 을 사용하기 위해서는 <!doctype html>넣어줘야 하구요
html 기초를 다 배우신 분이면 위에서스가 무슨뜻인 지 알 수있을거에요..
위에소스를 이해 하지 못했다면 먼저 html부터 배우시기 바랍니다.
모바일홈페이지 만들기 메인 페이지 소스
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <!-- 이건 한글이 깨짐방지 메타태그 -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 요건 모바이 기기게 맞게 화면을 조절해주는 태그 -->
<title> 모바일홈페이지 제작 </title> <!-- 웹페이지 제목을 타나냄 -->
<!-- 아래는 jqery 와 jquery mobile 을 사용하기위한 소스 추가 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- 여기부터는 메인페이지 소스 -->
<div data-role="page" id="first">
<!-- 이건 상단바 를 내나태게하는 태그 에요 -->
<div data-role="header" data-theme=b>
<h1>상단</h1>
</div>
<!-- 이건 중간에 중간에 들어갈 내용 -->
<div data-role="main" class="ui-content">
<h1><center>중간</center></h1>
<h2><center>별거없음</center></h2>
</div>
<!-- 이건 하단 바 를 나타네게하는 태그-->
<div data-role="footer" data-theme=b data-position="fixed">
<h1>하단</h1>
</div>
</div>
</body>
</html>
위에 소스를 에디터 플러스 에 붙여넣고 실행해보시면 아래와같이 뜰거에요..
여기 복사가 안되는 txt 파일에 소스를 첨부해 올렸습니다. 다운받아서 복사후 에디터 플러스에 붙여넣거 실행해보세요.
모바일홈페이지 메인페이지 소스.txt
에디터 플러스 실행후 위에 빨간네 모친 부분을 클릭해주세요.
그럼 위와같이 뜨는데 위에 소스는 지우시고 다운받은 소스 를 여기에 붙여넣어주세요.
붙여넣은 다음 왼쪽에 지구모양 아이콘을 눌러 주시면 볼 수 있습니다..
에디터 플러스에서 실행한 화면입니다. 화면이 크면 작게 줄이시면됩니다..(저는 화면을 작게 줄여서 이렇게 뜬거에요.)
상하단 바 색상은 원하는 색상으로 바꾸셔도 됩니다. 블랙으로 하고싶으시면 data-theme=a 로 하면 블랙으로 바뀌게됩니다.
data-theme=b 를 data-theme=a 로 바꾸면 블랙으로 바뀌게 됩니다..
아래는 블랙테마 소스 입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 모바일홈페이지 제작 </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="first">
<div data-role="header" data-theme=a>
<h1>상단</h1>
</div>
<div data-role="main" class="ui-content">
<h1><center>중간</center></h1>
<h2><center>별거없음</center></h2>
</div>
<div data-role="footer" data-theme=a data-position="fixed">
<h1>하단</h1>
</div>
</div>
</body>
</html>
원래는data-theme=b 였던것을 a로 바꾸었습니다.
여기서 변경된것은 data-theme=b 를 data-theme=a 로 바뀐것뿐입니다. 다른것 다 그대로에요.
위에 소스를 쉽게 설명 해드리자면
아래에 이해하기 쉽게 그림으로 만들어 봤습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 모바일홈페이지 제작 </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<!-- ↑ 위 부분은 그냥 모바일 홈페이지에 jquery mobile 을 사용하기 위한 소스 입니다. 외우지 않으셔도됩니다.-->
<!-- ↓ 아래 부분이 페이지에 중요한 소스입니다. .-->
<body>
<div data-role="page" id="first">
<!-- ↓ 페이지 상단 바 -->
<div data-role="header" data-theme=a>
<h1>상단</h1>
</div>
<!-- ↓ 페이지 중간에 보여질 내용-->
<div data-role="main" class="ui-content">
<h1><center>중간</center></h1>
<h2><center>별거없음</center></h2>
</div>
<!-- ↓ 페이지 하단 바 -->
<div data-role="footer" data-theme=a data-position="fixed">
<h1>하단</h1>
</div>
</div>
</body>
</html>
이렇게하면 html + jquery mobile 로 메인 페이지 가 만들 어졌습니다. 위에소스는 그냥 간단한 예제입니다.
간단하게 설명드리기 위함 이구요...
더멋지게 모바일홈페이지를 꾸미려면 jquery mobile을 공부하셔야합니다.
아이콘 등 navbar 를 적용 시키면 더멋진 모바일 홈페이지 를 만들수 있습니다.
아래 그림보시면
저기 보이는 아이콘들은 jquery mobile에서 기본으로 제공하는 아이콘 들입니다.
data-icon="home" 이렇게하면 집모양 아이콘 이고
data-icon="star" 하면 별아이콘이 돼요
소스는 아래 와같습니다.. 추가 된 부분은 을 보시면 어디에 추가되었는지 아실수있습니다.
<div data-role="header" data-theme=a>
밑에
<h1>상단</h1> <= 요 부분에 네비바 <div data-role="navbar"> 를 추가 였습니다...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 모바일홈페이지 제작 </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="first">
<div data-role="header" data-theme=a>
<!-- 아래 부분이 추가 되었습니다. -->
<div data-role="navbar">
<ul>
<li><a href="#homePage" data-icon="home" data-transition="flip">HOME</a></li>
<li><a href="#plusPage" data-icon="plus" data-transition="slideup">로그인</a></li>
<li><a href="#minusPage" data-icon="minus" data-transition="slidedown">회원가입</a></li>
<li><a href="#starPage" data-icon="star" data-transition="fade">최근글</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<h1><center>중간</center></h1>
<h2><center>별거없음</center></h2>
</div>
<div data-role="footer" data-theme=a data-position="fixed">
<h1>하단</h1>
</div>
</div>
</body>
</html>
html + jquery mobile 만 배우셔도 모바일 홈페이지 만들기 반은 먹고 들어 가는거라고 할 수 있어요~!!
어렵지 않아요. 저는1개월 배워서 모바일 홈페이지를 만들었습니다.
게시판 만들기는 좀 어렵게 때문에 나중에 할거구요. 지금은 먼저 간단한것부터 배울거에요...
천천히 따라오시면 모바일 홈페이지 쉽게 만들 수 있습니다.
모바일홈페이지만들기 강좌 오늘은 여기 할거구요.. 다음시간에는 메인페이지 중간에 내용들을 넣어보겠습니다.
그림으로 미리 보여 드립니다.. ㅎㅎ
다음 강좌에서는 어떤걸 만들지 궁금해하시는 분들이있으실까봐 미리 보여드립니다.
다음 강좌도 기대해주시구요... 이강좌는 10 탄 정도 까지 할거 같네요..
게시판 만들기도 해볼 거에요.. 휴 강좌쓰는데 2시간 반이나 걸렸네요...
그럼 다음 강좌에서 뵙겠습니다.
p.s 이 강좌는 다른곳으로 퍼가기 금지 합니다. 카페나 블로그 에 퍼가시면 안됩니다..
링크 만 허용합니다...