jQuery Mobile 스마트폰 사이트 디자인
도서명:jQuery Mobile 스마트폰 사이트 디자인
저자/출판사:Nishihata,Kazuma,Nabesaka,Rie/영진닷컴
쪽수:216쪽
출판일:2012-10-25
ISBN:9788931443226
목차
CHAPTER 1. [도입편] jQuery Mobile 기초지식
[1-1] jQuery Mobile이란?
스마트폰 시대의 웹 제작
스마트폰용 프레임워크의 등장
iOS 휴먼 인터페이스 가이드라인
‘jQuery Mobile’
예제 코드로 보는 jQuery Mobile의 간단함
[COLUMN①] 스마트폰 사이트의 제작 및 검증 환경
CHAPTER 2. [기초편] 예제로 배우는 jQuery Mobile 기본
[2-1] 스마트폰 사이트 메인 페이지 만들기
jQuery Mobile과 HTML5
jQuery Mobile과 jQuery의 로딩
스마트폰용 Viewport의 설정
jQuery Mobile에서 ‘페이지’ 개념
페이지 전환
header/footer의 배치와 레이아웃 정의
디자인 테마의 변경
스마트폰다운 리스트 표시
[2-2] 개별 페이지 작성과 구글맵의 표시
‘about’ 페이지의 작성
[One Point Advice] h2 요소에 class 이름 'h1'을 붙이는 이유
header 링크의 설계
‘세미나 정보’ 페이지의 작성
구글맵의 설치
[2-3] 문의 폼의 작성과 사이트 완성
‘폼(Form)’ 과제와 jQuery Mobile을 이용한 해결
폼 UI의 기본
여러 줄을 입력하는 박스의 최적화
[실무에서 빠지기 쉬운 함정] 동일 사이트 안에서 id 이름 중복에 주의
플립 스위치 표시하기
사용하기 쉬운 체크 박스 추가
전송/취소 버튼 장식
CHAPTER 3. [레퍼런스편] 좀더 알고 싶은 jQuery Mobile 사용법
[3-1] 페이지 작성과 페이지 전환
페이지 작성
테마의 변경 [data-theme=“테마 이름”]
페이지 전환 애니메이션의 설정 [data-transition=“효과 이름”]
[실무에서 빠지기 쉬운 함정] 안드로이드 단말기에서 플립 애니메이션이 동작하지 않는다!
[3-2] 리스트 표시 UI의 기본과 변형
일반적인 리스트 표시 [data-role=“listview”]
분할 리스트
둥근 모서리 리스트 [data-inset=“true”]
설명문이 있는 리스트
리스트에 제목 설정 [data-role=“list-divider”]
카운트 버블 표시 [class=“ui-li-count”]
섬네일 / 아이콘이 있는 리스트
검색 필터의 이용 [data-filter=“true”]
리스트 테마의 변경 [data-theme=“테마 이름”]
[3-3] header/footer의 사용자정의
Back 버튼 표시 [data-add-back-btn=“true”]
[One Point Advice] header가 아닌 다른 곳에서 ‘Back’ 버튼을 사용하고 싶은 경우
header/footer에 임의의 버튼 표시
네비게이션 바의 추가 [data-role=“navbar”]
header/footer의 고정배치 [data-position=“fixed”]
[One Point Advice] position:fixed을 이용한 고정배치
[3-4] 콘텐츠 영역의 레이아웃
그리드 레이아웃(Grid Layout)
접이식 패널 [data-role=“collapsible”]
[3-5] 폼 UI의 최적화
폼 UI의 적용 [data-role=“fieldcontain”]
선택형 UI의 이용
브라우저의 기본 폼 이용
버튼의 최적화
[COLUMN②] jQuery Mobile의 초기 설정
[COLUMN③] jQuery Mobile의 용도
CHAPTER 4. [사용자정의편] jQuery Mobile 오리지널 디자인
[4-1] 사용자정의로 테마 만들기
jQuery Mobile의 CSS 해부하기
오리지널 색상의 테마 작성하기
[COLUMN④] CSS3 그라데이션의 사용
[COLUMN⑤] Theme Roller를 이용한 사용자정의
[4-2] 세미 커스터마이즈로 뉴스 사이트 디자인하기
메인 페이지의 HTML 준비하기
스타일시트의 설정
[One Point Advice] linear-gradient의 사양 변경
탭 메뉴의 작성
[One Point Advice] jQuery 1.7부터 이용할 수 있는 on 메소드
여러 HTML을 이용한 목록 / 기사 페이지의 작성
[COLUMN⑥] '웹 속성 보기'(Web inspector)
[4-3] 풀 커스터마이즈로 상품 사이트 디자인하기
HTML의 작성
[One Point Advice] Ajax 페이지 전환과 rel="external"
CSS의 작성
[실무에서 빠지기 쉬운 함정] 아이폰에서 가로 방향으로 돌리면 확대됩니다.
[COLUMN⑦] jQuery Mobile에서 Google Analytics의 적용
[COLUMN⑧] CSS3 참고 사이트
