장바구니 담기 close

장바구니에 상품을 담았습니다.

JQUERY MOBILE스마트폰사이트디자인입문

JQUERY MOBILE스마트폰사이트디자인입문

  • Nishihata Kazuma , Nabesaka Rie
  • |
  • 영진닷컴
  • |
  • 2012-10-25 출간
  • |
  • 216페이지
  • |
  • ISBN 9788931443226
★★★★★ 평점(10/10) | 리뷰(2)
판매가

18,000원

즉시할인가

16,200

배송비

2,300원

(제주/도서산간 배송 추가비용:3,000원)

수량
+ -
총주문금액
16,200

이 상품은 품절된 상품입니다

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

목차

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 참고 사이트

도서소개

예제로 배우는 jQuery Mobile 입문서! 『jQuery Mobile 스마트폰 사이트 디자인』은 초보 개발자와 디자이너를 위한 아주 쉬운 제이쿼리 모바일(jQuery Mobile) 입문서이다. 초보 프로그래머는 물론 웹 디자이너들도 모바일 관련 스마트 디자인을 할 수 있도록 기초부터 아주 쉽게 가이드하고 있으며, jQuery Mobile의 기본적인 사용법부터 고급 수준인 사용자정의 방법까지 습득할 수 있도록 구성되어 있다. 스마트폰을 위한 프레임워크가 필요하게 된 배경부터 jQuery Mobile의 특징과 개요를 설명하고, jQuery Mobile을 사용한 스마트폰 사이트 제작방법, jQuery Mobile의 주요 기능을 다양한 예제 코드와 실행결과의 화면을 통해 보여준다. jQuery Mobile을 사용자정의해서 오리지널 디자인의 스마트폰 사이트를 만드는 고급 기법도 만나볼 수 있다. 부록으로 가위로 잘라서 제이쿼리 모바일의 실제 UI 장면을 시연을 해볼 수 있도록 휴대폰 모양의 종이 시뮬레이터를 제공한다.
<jQuery Mobile 스마트폰 사이트 디자인>

초보 개발자와 디자이너를 위한 아주 쉬운 제이쿼리 모바일(jQuery Mobile) 입문서

스마트폰의 보급으로 인해 사용자들은 PC 앞뿐만 아니라 태블릿 PC 등 다양한 디바이스 환경에서 웹 사이트를 이용하고 있습니다. 스마트폰을 지원하는 웹 사이트 또한 PC용 웹 사이트 이상으로 interactive한 요소가 요구되고 있는데, 이러한 대안책으로 최근 가장 주목받고 있는 것이 바로 ‘jQuery Mobile’입니다.
jQuery Mobile은 jQuery 프로젝트의 일환으로 iOS, 안드로이드, 블래베리 등 다양한 스마트폰 OS에 적합한 UI 및 동작을 제공하는 스마트폰용 프레임워크입니다. 그러나 jQuery Mobile이 만능은 아닙니다. 웹 사이트에 따라 jQuery Mobile 이용이 적당한 사이트와 그렇지 않은 사이트가 있습니다. 웹 사이트를 만들기 전에 그 사이트가 jQuery Mobile에 적합한지 아닌지를 판단할 필요가 있고 이를 위해 jQuery Mobile로 무엇이 가능한지를 사전에 알아 두어야 합니다.
이 책은 ‘jQuery Mobile’을 사용한 스마트폰 사이트의 제작방법을 설명한 입문서입니다. 초보 프로그래머는 물론 웹 디자이너들도 모바일 관련 스마트 디자인을 할 수 있도록 기초부터 아주 쉽게 가이드하고 있으며, 1장부터 순서대로 진행하면 jQuery Mobile의 기본적인 사용법부터 고급 수준인 사용자정의 방법까지 습득할 수 있도록 구성되어 있습니다.
1장 [도입편]에서는 스마트폰을 위한 프레임워크가 필요하게 된 배경부터 jQuery Mobile의 특징과 개요를 설명하고, 2장 [기초편]부터 본격적인 jQuery Mobile을 사용한 스마트폰 사이트 제작방법을 설명합니다. 간단한 회사 안내 사이트를 사례로 라이브러리 로딩부터 페이지 작성, 헤더와 푸터 정의, 메뉴 작성 등 기본적인 마크 업 방법을 배웁니다. 3장 [레퍼런스편]에서는 jQuery Mobile의 주요 기능을 다양한 예제 코드와 실행결과의 화면을 통해 보여줍니다. 4장 [사용자정의편]에서는 jQuery Mobile을 사용자정의해서 오리지널 디자인의 스마트폰 사이트를 만드는 고급 기법을 설명합니다.
본문 내용 중간마다 칼럼과 팁 등 다양한 읽을거리를 싣고 있으며, 책 뒤에는 부록으로 가위로 잘라서 제이쿼리 모바일의 실제 UI 장면을 시연을 해볼 수 있도록 휴대폰 모양의 종이 시뮬레이터를 수록하고 있습니다.

주요 내용

1장 [도입편] jQuery Mobile 기초 지식
jQuery Mobile 개요에 대하여 설명합니다. 스마트폰을 위한 프레임워크가 필요하게 된 배경부터 jQuery Mobile의 특징, 이용시 장점을 배웁니다.

2장 [기초편] 예제로 배우는 jQuery Mobile 기본
jQuery Mobile을 사용한 스마트폰 사이트 제작방법을 설명합니다. 간단한 회사 안내 사이트를 예로 라이브러리 로딩부터 페이지 작성, 헤더와 푸터 정의, 메뉴 작성 등 기본적인 마크 업 방법을 배웁니다.

3장 [레퍼런스편] jQuery Mobile 응용
jQuery Mobile의 주요 기능을 설명합니다. 스마트폰 제작에 필요한 기능을 중심으로 바로 시험해 볼 수 있는 간단한 예제 코드와 실행결과의 화면을 보면서 학습합니다.

4장 [사용자정의편] jQuery Mobile 오리지널 디자인
jQuery Mobile을 사용자정의해서 오리지널 디자인의 스마트폰 사이트를 만드는 방법을 설명합니다.배색을 변경하는 간단한 사용자정의부터 디자인 시안을 기초로 한 본격적인 사용자정의 방법까지 배웁니다.

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.