[JavaScript] Mobile WEB
- programming/javascript
- 2018. 10. 18. 19:27
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) 모바일 웹을 제작하는데 도움을 주는 모바일 프레임워크 중 하나
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 |