11 응용 – 아이콘 메뉴

(1)

11 응용 – 아이콘

메뉴

(2)

11-1 웹앱 프로젝트 기획

 JQueryMobile, HTML5, CSS3 응용 프로젝트 진행

모바일 웹 기획 개요

기본 페이지 준비 사이트맵 설계 세부 페이지 설계

2

(3)

11-2 메인 페이지 만들기

 JQueryMobile 로 엘리먼트에 동일한 스타일 적용

표준에 맞는 시맨틱 마크업을 하면 JQueryMobile에서 자동으로 스타일 적용

타이틀 CI 디자인

헤더 영역에 자신만의 이미지 삽입 이미지 등 정렬 팁

메뉴만들기

이미지 크기 썸네일 크기로 : class=“ui-li-thumb”

아이콘 사용시 : class=“ui-li-icon”

3

(4)

12 응용 -

내비게이션 메뉴

(5)

12-1 툴바 기본 사용법 익히기 (1)

 JQueryMobile 에서 툴바 사용

Header와 Footer 영역에서 data-role을 “navbar”로 지정하고, ul 엘리먼트 사용

포커스(기본 선택)를 주고 싶은 li에 class=“ui-btn-active” 기입

 Inline 모드

별도 지정이 없는 경우 inline 모드로 동작

화면 스크롤시 다른 내용들과 함께 이동 (글자나 이미지와 같이 앨리먼트로 취급됨)

 Fixed 모드 설정

툴바를 화면에 고정시키고자 할 때 data-position을 “fixed”로 설정하면 스크롤되지 않고 원래 위치에 고정됨

 FullScreen 모드

사진을 터치하면 메뉴나 툴바가 사라지고, 다시 터치하면 나타나는 UI

data-fullscreen=“true” 로 설정

5

(6)

12-1 툴바 기본 사용법 익히기 (2)

툴바에 아이콘 삽입하기

JQueryMobile의 기본 아이콘

 18종류(arrow-l, arrow-r, arrow-u, arrow-d, …)

 아이콘 이름으로 추가

 예 : data-icon=“grid”

Back 과 Home 버튼 사용

6

(7)

12-2 PhotoSwipe 사용하기

무료 이미지 갤러리 UI 프레임워크

여러 사진을 갤러리 형식으로 보여줌 모든 웹킷 브라우저에 최적화

해당 페이지 접속 및 관련 자료 검색

7