게임웹사이트운영 [11] 모바일 페이지 작성.

게임웹사이트운영 [11] 모바일 페이지 작성

1. 첫 모바일 페이지 : jq1.htm <!DOCTYPE html> <html> <head>
<title>jQuery test HTML5</title> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> <p> First Page </p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> </body> </html>

2. 페이지 추가 <section id="page1" data-role="page">
<header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> <p> First Page </p> <p><a href="#page2">Go to the Second Page</a></p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> <section id="page2" data-role="page"> <header data-role="header"><h1>jQeury Mobile Second Page Test</h1></header> <p>Second Page using HTML 5 tag</p><p></p> </body> </html>

3. Back버튼 추가 <section id="page1" data-role="page">
<header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> <p> First Page </p> <p><a href="#page2">Go to the Second Page</a></p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> <section id="page2" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>jQeury Mobile Second Page Test</h1></header> <p>Second Page using HTML 5 tag</p><p></p> </div> </body> </html>

4. 외부파일 연결하기 : jq-ex.htm <!DOCTYPE html> <html><head><title>jQuery test HTML5</title> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <section id="page4" data-role="page"> <header data-role="header"> <h1>External File Test</h1> </header> <div class="content" data-role="content"> <p>Hello External Page TEst</p> <p><a href="jq1.htm" rel="external">Go to the First Page</a></p> </div><footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> </body> </html> <p>Second Page using HTML 5 tag</p> <p><a href="jq-ex.htm" rel="external">Go to External page</a></p>

5. 목록 뷰 만들기[1] : jq-list.htm <h3>Unordered List</h3>
<!DOCTYPE html> <html><head><title>jQuery test HTML5</title> <link rel="stylesheet" href=" /> <script src=" <script src=" </head> <body> <section id="page1" data-role="page"> <header data-role="header"><h1>jQeury Mobile Page Test</h1></header> <div class="content" data-role="content"> 여기에 목록 추가 </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section> </body> </html> <h3>Unordered List</h3> <ul data-role="listview"> <li>item</li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> </ol>

5. 목록 뷰 만들기[2]

6. 목록 뷰 버튼 만들기 <h3>Unordered List</h3>
<ul data-role="listview"> <li><a href="#">item</a></li> </ul> <h3>Ordered List</h3> <ol data-role="listview"> </ol>

7. 중첩 목록 뷰 만들기 : jq-list2.htm <h3>Nested List</h3>
<ul data-role="listview"> <li>School of Creative Contents <ul> <li><a href="#">Game</a></li> <li><a href="#">Cartoon</a></li> <li><a href="#">Animation</a></li> </ul> </li> <li>Subjects <li><a href="#">Web Design</a></li> <li><a href="#">Game Test</a></li> <li><a href="#">Programming</a></li>

8. 썸네일 추가 25x16 <h3>Nested List</h3>
<ul data-role="listview"> <li>School of Creative Contents <ul> <li><a href="#"><img src=“img/a.png“ class=“ui-li-icon”>Game</a></li> <li><a href="#">Cartoon</a></li> <li><a href="#">Animation</a></li> </ul> </li> <li>Subjects <li><a href="#">Web Design</a></li> <li><a href="#">Game Test</a></li> <li><a href="#">Programming</a></li> 25x16

9. 툴바 만들기 : jq-tool.htm <section id="page1" data-role="page">
<header data-role="header"> <h1>jQeury Mobile Tool</h1> <nav data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">First</a></li> <li><a href="#page2">Second</a></li> <li><a href="#page3">Third</a></li> </ul> </nav> </header> <div class="content" data-role="content"> <p> First Page </p> </div> <footer data-role="footer"><h2>I am a footer, 000.</h2></footer> </section>

jQeury Mobile Page Test

jQeury Mobile Page Test

게임웹사이트운영 [11] 모바일 페이지 작성.

Similar presentations

Presentation on theme: "게임웹사이트운영 [11] 모바일 페이지 작성."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

게임웹사이트운영 [11] 모바일 페이지 작성.

Similar presentations

Presentation on theme: "게임웹사이트운영 [11] 모바일 페이지 작성."— Presentation transcript:

Similar presentations

About project

지원