![[JavaScript] Mobile WEB](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F995313415BC85FD52C)
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 - 식당 상세 정보 페이지)