관리 메뉴

moozi

6/14 jquery mobile 본문

TIS_2016/HTML5_2기

6/14 jquery mobile

moozi 2016. 6. 14. 14:36

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JqueryMobile</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">

    <script src="js/jquery-1.12.4.min.js"></script>

    <script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

    <div id="page1" data-role="page">

        <div data-role="header">

           <a href="#" data-icon="home">home</a>

           <a href="#" data-icon="refresh">Prev</a>

            <h1>웹표준</h1>

        </div>

        <div data-role="content">

           <h2>수강과목</h2>

            <ul data-role="listview" data-inset="true">

               <li data-role="list-divider">웹퍼블리셔과목</li>

                <li>

                    <a href="#">

                       <img src="img/html5.png">

                        <h1>HTML5</h1>

                        <p>웹표준언어</p>

                    </a>

                </li>

                <li>

                    <a href="#">

                       <img src="img/css3.png">

                        <h1>CSS3</h1>

                        <p>웹페이지 스타일 지정언어</p>

                    </a>

                </li>

                <li data-role="list-divider">프론트엔드개발자과목</li>

                <li>

                <a href="#">Javascript</a></li>

                <li><a href="#">Jquery</a></li>

            </ul>

            <h1>

                <a href="#page2" data-transition="slide" data-role="button">다음페이지</a>

            </h1>

            

        </div>

        <div data-role="footer">

            <h3>&copy;copyrights. TIS정보기술교육센터.</h3>

        </div>

    </div>

    

    <div id="page2" data-role="page" data-theme="a">

        <div data-role="header">

            <h1>웹표준2</h1>

        </div>

        <div data-role="content">

           <h2>수강과목2</h2>

            <ul data-role="listview" data-inset="true">

                <li><a href="#">HTML5</a></li>

                <li><a href="#">CSS3</a></li>

                <li><a href="#">Javascript</a></li>

                <li><a href="#">Jquery</a></li>

            </ul>

            <h1>

                <a href="#page1" data-transition="slide" data-role="button">이전페이지</a>

                <a href="#page1" data-rel="dialog" data-role="button">이전페이지</a>

            </h1>

        </div>

        <div data-role="footer">

            <h3>&copy;copyrights. TIS정보기술교육센터.</h3>

        </div>

    </div>

</body>

</html>

'TIS_2016 > HTML5_2기' 카테고리의 다른 글

jquerymobile 연습문제01  (0) 2016.06.14
6/14 jquerymobile02.html  (0) 2016.06.14
6/13 수업예제  (0) 2016.06.13
jquery연습문제03  (0) 2016.06.13
jquery연습문제02 풀이  (0) 2016.06.13
Comments