브라우저 제목

기본 태그 작성 및 css, jquery 연결

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        
        <!-- jquery mobile -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <!-- /jquery mobile 끝 -->
        

        <!-- 사용자 css 및 jquery -->
        <link rel="stylesheet" href="css/app1.css">
        <script src="js/app1.js"></script>
        <!-- /사용자 css 및 jquery -->

    </head>
    <body>
    
    </body>
</html>

 

페이지 구성

페이지는 한 페이지 내에서 jquery-mobile의 data-role속성을 이용합니다.

data-role="page"         data-role의 page는 한 페이지에서 여러 화면을 구성할 화면 page를 설정합니다.

data-role="header"      page내에서 header를 설정합니다.

data-role="content"     page내에서 content를 설정합니다.

data-rol="footer"        page내에서 footer를 설정합니다.

 

html 구성

<body>
    <!-- 페이지 구성 -->
        <div data-role="page" id="main">
            <div data-role="header">
                <h1>헤더</h1>
            </div>
            <div data-role="content">
                <p>컨텐트</p>
            </div>
            <div data-role="footer">
                <h2>푸터</h2>
            </div>
        </div>
 </body>

 

 

제목 날짜
코르도바 를 설정하기 위한 방법(수정) file 2020.04.26
탭-collapsible 및 구글맵을 이용한 현재 위치 찾기 file 2018.02.04
패널을 이용한 메뉴와 그리드 file 2018.02.01
갤러리화면을 만들기 위한 fotorama 플러그인 file 2018.01.31
index ui구성2 file 2018.01.30
index의 ui구성 file 2018.01.29
여러 페이지를 이용하여 화면 구성 file 2018.01.28
한 페이지에 여러화면을 구성 file 2018.01.28
jquey mobile 테마정하기 file 2018.01.28
기본 페이지 작성 file 2018.01.28
phonegap을 사용하기 위한 준비 작업 file 2018.01.24
태그 목록