안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HybridApp

HybridApp - 0세대 WebApp(다양한 버튼)

차누감 2020. 1. 15. 15:03
반응형

<최종화면> 여러가지 버튼에 대해서 알아보자.

webapp 폴더 안에 02_Button폴더를 만들고, index.html파일을 만들자.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
 
     <!-- Jquery Mobile(JQM) library 적용 : jquerymobile.com-->
    <!-- 1. CDN방법 -->
    <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>
 
</head>
<body>
        <div data-role="page">
            <div data-role="header">
                <h2>Button Widget</h2>
            </div>
 
            <div data-role="content">
                <!-- JQM에서 버튼이 되는 요소 3개 -->
                <a href="#" data-role="button">Anchor button</a>
                <input type="button" value="Input Button">
                <button style="background-color: aqua;">Button element</button>
 
                <hr>
             
 
            </div>
 
        </div>
        
</body>
</html>
 

<복붙용 코드>

02_Button.zip
0.76MB

반응형
저작자표시