코락 CoRock
코딩하는 락스타
코락 CoRock
  • 분류 전체보기 (393)
    • frameworks (19)
      • spring (19)
      • spring-boot (0)
      • testing (0)
    • languages (94)
      • java (39)
      • kotlin (0)
      • python (42)
      • r (13)
    • libraries (0)
    • programming (239)
      • android (13)
      • c (17)
      • cpp (22)
      • database (18)
      • design-pattern (4)
      • data-structures (11)
      • git (8)
      • hadoop (6)
      • html-css (7)
      • issue (4)
      • javascript (26)
      • jsp (34)
      • os (29)
      • php (6)
      • preferences (19)
      • etc (15)
    • discography (37)
      • k-pop (18)
      • pop (19)
    • blog (3)

블로그 메뉴

  • Programming
  • Java
  • JavaScript
  • Discography
  • K-Pop Songs
  • Pop Songs
  • Blog
  • Guestbook

공지사항

인기 글

태그

  • Spring
  • oracle
  • Java
  • python
  • CentOS
  • 자바스크립트
  • linux
  • 파이썬
  • r
  • Android
  • jsp
  • javascript

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
코락 CoRock

코딩하는 락스타

[JavaScript] Mobile WEB
programming/javascript

[JavaScript] Mobile WEB

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) 모바일 웹을 제작하는데 도움을 주는 모바일 프레임워크 중 하나

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)
    • [JavaScript] jQuery
    • [JavaScript] Ajax, XML, JSON
    • [JavaScript] 자바스크립트 객체
    코락 CoRock
    코락 CoRock
    A COder dreaming of being a ROCKstar

    티스토리툴바