● WepApp
- JQM library [ data-role 속성 ]
- Bootstrap [ class 속성 ]
<최종화면> 안드로이드 스튜디오를 이용하지 않고, 모바일형식으로 만든다.
JQM library를 이용하면 모바일형식으로 쉽게 웹을 만들 수 있다.
우선 작업할 폴더를 만들고 거기에서 작업을 하자.
D\HybridApp\webapp 폴더를 만들었다. webapp폴더에서 작업을 할 것이다.
visual code를 이용하겠다. webapp폴더에 01_Introduce 폴더를 만들고, index.html 파일을 만들자.
이제 아래 사이트에서 JQM library를 다운받자.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
다운 받은 압출 파일을 압축을 풀자.
압축을 풀고, 필요한 것만 01_Introduce폴더에 복붙하자.
CDN 방식과 다운로드 방식을 둘다 썼다.
해당 파일을 웹브라우저로 확인하자. 웹 브라우저에서 모바일 화면으로 확인 가능하다.
page3은 따로 파일을 만들어서 열겠다. 01_Introduce폴더에 page3.html을 만들자.
page3.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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div data-role="page" id="page3">
<div data-role="header">
<h2>PAGE3</h2>
<a href="index.html" data-icon="back" data-rel="back">BACK</a>
</div>
<div data-role="content">
<p>This is page3</p>
<a href="#" data-role="button">button</a>
</div>
</div>
</body>
</html>
|
ajax를 지원하는 Edge로 열어보자. 그러면 Go to PAGE2 버튼을 눌렀을때 잘 보인다.
<복붙용 코드>
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HybridApp' 카테고리의 다른 글
| HybridApp - 1세대 cordova 설치 및 안드로이드 연결 (0) | 2020.01.16 |
|---|---|
| HybridApp - 0세대 WebApp( listview ) (0) | 2020.01.16 |
| HybridApp - 0세대 WebApp(다양한 버튼) (0) | 2020.01.15 |
| HybridApp - 0세대 WepApp (갤러이앱 열고, 웹-앱 문자열 전달) (0) | 2020.01.15 |
| Hybrid App - 0세대 WebApp (안드로이드 스튜디오로 html 작성 및 반응형 웹 열기) (0) | 2020.01.15 |
댓글