첫페이지 만들기
페이지 정보
작성자 서방님 댓글 0건 조회 121회 작성일 15-07-09 11:57본문
지난 시간 전체적인 구조를 잡아 봤고, 그럼 슬슬 제대로 만들어 보자구요.
우선 jquerymobile 이 어떻게 페이지를 이동 시키는지 정도는 알고 넘어가는게 좋을 것 같은데.
지난번 화면을 봐서 일겠지만 jquerymobile은 간단히 말해서 div 를 보여주고 안보여주고 하는 방식으로 작동 한다.
그래서 한페이지에서 div 를 구분해서 페이지 작업을 하는 것.
하지만 그렇게 해서 작업하자면 여간 힘든게 아니라는 것 정도는 작업해 본 사람이라면 다 알테고.. (웹사이트 그런식으로 만들어 봐.... 답이 나오나.. 나중에 유지관리 할때도 힘들고... 무슨 80년대 C프로그램 짜는 것도 아니고..)
그럼 어떻게 하느냐..
당근 페이지를 각각 나눠서 작업 한다.. 하지만 jquerymobile은 앞에서도 말했듯 무조건 div 구분해서 그거로 왔다 갔다 한다는거.. 잊지 말자.. 왜 중요 하냐면... 차차 말하겠다..
자 그럼 페이지 구분해서 작업 하는 것으로 방향 잡고 다시 구조 잡아 볼까나....
메인페이지 (index.html)
소개페이지 (intro.html)
공지사항 (notice.html)
포트폴리오 (potfolio.html)
한마디남기기 (comment.html)
이렇게 해서 한페이지씩 만들면 되고.
자 메인페이지 부터 만들어 보자.
(index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<!--메인페이지-->
<div data-role="page" id="page">
<div data-role="header">
<h1>메인페이지</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="intro.html">소개</a></li>
<li><a href="notice.html">공지사항</a></li>
<li><a href="portfolio.html">포트폴리오</a></li>
<li><a href="comment.html">한마디남기기</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
달라진것을 보면 각각의 링크가 달라진것과 그 많던 div 가 사라져 버렸다는 ....
그럼 어떻게 작동하느냐.... 그건 차차 보도록 하는 거라고요..
다음 페이지는 어떻게 될것이냐...
소개페이지 들어 갑니다.
(intro.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<!--메인페이지-->
<div data-role="page" id="page2">
<div data-role="header">
<h1>소개페이지</h1>
</div>
<div data-role="content">
소개페이지 입니다.
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
보다시피 소개페이지도 똑 떨어져 나왔다. 이걸 실행 시켜 보면 신기한 현상 하나 보게 될 것인데.. 설명할 것이 좀 많아서 다음에 하도록 하겠음...
댓글목록
등록된 댓글이 없습니다.
