JQUERY MOBILE WEB 기초

Native App

- 보편적인 모바일 애플리케이션

- 특정한 플랫폼에서 작동하는 앱 

- 장점) 실행속도 빠르고 안정적, Mobile 기기에 최적화, 개발툴 비교적 편리

- 단점) 특정 플랫폼에서 동작(개발자가 각 플랫폼에 따라 필요), 업데이트가 느리다.

 

Mobile Web

- PC용 사이트의 구성을 모바일에 맞춰 표현한 웹

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

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

- 단점) 네이티브 앱에 비해서 속도가 현저하게 느리고(최근에 네트워크 속도가 빨라져서 많이 개선), 접근성이 낮다.

 

Hybrid App

- 겉으로는 Native App 모습을 가지고 앱스토어를 통해 배포되나, 실제 주요 콘텐츠는 브라우저 기본으로 하는 web형태로 서버로부터 정보를 받아 구성

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

- 특정 센서를 이용할 수 있다.

 

반응형 웹 디자인 ( UI / UX )

- 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공하는 기술

- 휴대폰에서 데스크탑 컴퓨터에 이르기까지

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

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

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

 

jQuery Mobile

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

2) 기본적으로 제이쿼리가 존재해야한다. jQuery 1.8 - 1.11/2.1 버전 (지원되는 버전)

3) 2010년 발표, 현재 최신 버전 1.4.5

4) 보통은 cdn방식으로 처리한다.

5) CSS + jQuery API 규약 묶여있어서 사용자 정의 CSS를 가급적 자제해야한다.

 

속성 = 속성값

태그(속성)에 data-role을 지정함 - 아래의 속성들을 지정해줘야 맞는 UI제공해준다.

header : header 영역 

content : 내용 영역

footer : footer 영역

listview : 리스트뷰형식

button : 버튼 형식

 

모바일 웹앱 개발

 

점점 웹앱은 네이티브 앱을 지향하고, 네이티브 앱은 점점 웹기술을 쓰려고 하는 경향으로 간다.

웹 기술과 네이티브 기술이 혼합이 되어져서 웹 앱이 만들어진다.

 

웹앱  : 네이티브 앱 같은 모바일 웹 페이지

 

모바일 UI 프레임워크

- 모바일 환경에서는 사용자 경험 UX가 강조된다.

- UX : 사용자가 특정 제품, 서비스를 직/간접적으로 이용하며 느끼고 생각하는 총체적 경험

- 프레임워크를 통해서 UX특성의 많은 부분을 처리할 수 있다.

- 공개코드로 개발되어 제공되므로 무료로 사용이 가능하다

 

 주요 모바일 UI 프레임워크

제이쿼리 모바일 - jQuery 확장한 프레임워크, HTML 태그 기반 개발 방식이라 배우기 쉽고, 대부분의 모바일 플랫폼을 지원하며, 성장가능성이 높고, 폰갭과 조합이 용이하다.

센차 터치 - 확장된 자바스크립트 기반 프레임워크

제이큐 터치 - 가장 먼저 공개된 프레임워크, 현재는 sencha에 흡수되었으며, 태그 기반의 개발 방식이다.

 

제이쿼리 모바일 프레임워크

- 표준 웹 기술을 사용하여 보다 쉽게 개발이 가능하다.

 

프레임워크 연결 방식

CDN(콘텐츠 전송 네트워크)와 다운로드 방식 존재

 

제이쿼리 모바일 페이지 구조

페이지 : 브라우저에 보여지는 전체 화면 영역 data-role="page"

헤더 : 상단 툴바 data-role="header"

콘텐츠 : data-role="content"

푸터 : data-role="footer"

 

페이지 도메인 링크 방식

- 페이지끼리 연결을 하는데, 방식이 나눠져 있다.

- 외부 페이지의 내부 링크 방식

    - Ajax의 작동으로 자연스러운 화면 전환 애니메이션 적용 가능

<a.href="b.html">

- 외부 페이지의 외부 링크 방식

<a href="b.html#page3" data-ajax="false>

<a href="url#page4" rel="external">

<a href="url#page5" target="_blank">

     - Ajax가 사용되지 않는 방식으로

     -단순히 전체페이지를 새로고치면서 전환된다.

     - 고전적인 링크 방식(풀페이지 링크 방식 - 페이지와 페이지를 연결만 하는 형태)

 

- 내부 페이지의 내부 링크 방식

ajax 적용, 소스 하나에 페이지를 바로 처리해서 링크가 잘 되나

페이지가 많아질수록 라인이 너무 많아지는 단점 존재

페이지 전환 효과

data-transition의 속성값

slide : 왼쪽으로 수평이동

slideup : 위쪽으로 수직이동

slidedown : 아럐쪽으로 수직이동

slidefade : 수평이동 후 서서히 나타남

flip : 페이지 회전

fade : 천천히 나타남

pop : 페이지 확장

turn : 페이지 뒤집기

flow : 페이지 축소 후 좌우이동

none, 공백 : 전환효과 적용 안함

 

외부 프로그램 링크

href 속성값

이메일 : <a href = "mailto: >

전화번호 : <a href = "tel: >

SMS : <a href="sms: >

맵(위성좌표)

맵(주소)

 

____그 외

<data-title=" "> 데이터 타이틀은 기존 html에서의 <title>이 하던 역할을 함.

<data-position="fixed"> 영역이 고정됨

<ul data-role="listview" data-inset="true" data-filter="true">

에서 data-inset="true"은 모서리 라운드 효과를, data-filter="true"는 li태그에 검색기능을 의미한다.

<data-rel="back">과 <data-direction="reverse">는 차이가 있다.

data-rel="back"은 웹브라우저의 뒤로가기 기능과 같아서 이전페이지 상태를 그대로 복구한다.

data-direction="reverse"는 이전 페이지 상태를 복원하지 않고 단순 페이지만 이동한다.

 

 

content영역에서 a태그로 버튼을 만들 때에는 명시적으로 data-role="button"이라고 적어야한다.

<a href="#" data-role="button" data-icon="star"><a>

data-icon은 아이콘을 의미

아이콘 링크는 다음과 같다.

https://api.jquerymobile.com/1.4/icons/