[JavaScript] Mobile WEB

6. Mobile WEB


가. Native App


(image)

* 보편적으로 지칭하는 모바일 애플리케이션

* 특정한 플랫폼에서만 작동되는 앱

- ex. 아이폰 앱을 안드로이드 폰에서는 실행 불가

* App Store에서 판매, 배포가 이루어짐


장점

단점

 - 실행속도가 빠르고 안정적

 - Mobile 기기에 최적화

 - 개발 툴이 비교적 편리

 - 특정 플랫폼에서 동작

 - 업데이트가 느림


나. Mobile Web


(image)

* PC용 사이트의 구성을 모바일에 맞추어 표현한 웹

* 스마트 디바이스에 최적화 된 홈페이지


장점

단점

 - 일반적인 웹 프로그래밍 기법으로 개발 가능

 - 네이티브 앱에 비해서 속도가 현저하게 느림

 - 접근성이 낮음


다. Hybrid App


- 겉으로는 Native App의 모습을 가지고 앱스토어를 통해 배포되지만 실제 주요 컨텐츠는 브라우저를 기반으로 하는 Web 형태로 서버로부터 정보를 전송받아 구성됨

- Hybrid App은 Native App과 Mobile Web의 장점을 모두 가짐

- 화면구성을 서버에서 할 수 있기 때문에 배포를 한 후에도 자유롭게 내용을 수정할 수 있음


장점

단점

 - 플랫폼(IOS, Android 등) 별로 앱을 개발해야 하는 번거로움이 없음

(비용절감, 유지보수 용이)

 - 프로그램 수정 시 재 컴파일하여 마켓이나 앱 스토어에 다시 올려야 함


라. 반응형 웹 디자인


- 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공하는 기술(휴대폰에서부터 데스크탑 컴퓨터에 이르기까지)

- CSS 미디어 쿼리를 통하여 웹 브라우저 상태값을 읽어 브라우저 창의 크기, 화면 방향, 화면 비율 등을 파악

- 절대값 대신 상대적인 값을 이용해 페이지 레이아웃 설정

- 부모 요소의 크기에 따라 이미지와 미디어의 크기가 자동으로 조절되도록 함


마. jQuery Mobile


1) 모바일 웹을 제작하는데 도움을 주는 모바일 프레임워크 중 하나

http://jquerymobile.com


2) 2010년 발표되었으며 현재 최신 버전은 1.4.5


3) 지원되는 jquery 버전 : jQuery 1.8 - 1.11 / 2.1


4) jQuery Mobile의 기본 구조

- 1개의 css 파일과 2개의 자바스크립트 라이브러리를 포함시킴

<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.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


- 태그에 data-role을 지정함

header : header 영역

content : 내용 영역

footer : footer 영역

listview : 리스트뷰 형식

button : 버튼 형식


바. 실습예제


1) responsive.html (반응형 웹 - 미디어 쿼리)    01;51;22

2) jqm_basic.html (jquery mobile 예제)    8.03;51

3) jqm_slider.html (jquery mobile 예제)

4) index.html (jquery mobile sample site - 메인 페이지)    17;34

5) choose_town.html (jquery mobile sample site - 지역 선택 페이지)    17;23/20;57

6) choose_restaurant.html (jquery mobile sample site - 식당 선택 페이지)

7) restaurant.html (jquery mobile sample site - 식당 상세 정보 페이지)


'programming > javascript' 카테고리의 다른 글

[33-js-concepts] 1. 호출 스택 (Call Stack)  (0) 2019.11.19
[JavaScript] jQuery  (0) 2018.11.21
[JavaScript] Mobile WEB  (0) 2018.10.18
[JavaScript] Ajax, XML, JSON  (0) 2018.07.04
[JavaScript] 자바스크립트 객체  (2) 2018.07.04
[JavaScript] DOM과 이벤트 처리, 입력검증  (5) 2018.07.02

댓글(0)

Designed by JB FACTORY