로그인회원가입장바구니고객센터마이페이지회사소개
kangcom
전체
Home >   >   > 

웹 디자이너를 위한 손쉬운 제이쿼리

   
지은이 나탈리 맥리   |   출판사 에이콘  |   발행일 2013년 05월 31일
 
클릭하시면 큰 도서이미지를 보실 수 있습니다.
판매가 30,000원27,000원 10%
마일리지 5% 1,500원
발행일 2013-05-31
ISBN 8960774332 | 9788960774339
기타정보 번역서 | 384쪽 | 일반
예상출고일 1~2일 이내 (근무일기준)
배송비 무료배송
   
종합지수 0p
   
이 책의 원서
  Jquery for Designers: Beginner's Guide
Packt | N. Maclees
 

HTML과 CSS를 어느 정도 이해하고 있는 웹 디자이너에게 프로그래밍의 기본기를 알려주고 제이쿼리와 플러그인을 어떻게 사용할 수 있는지를 알려주는 책이다. 프로그래밍 지식이 전혀 없어도 단계별로 따라가면서 나만의 드롭다운 메뉴나 슬라이드쇼를 만들어가는 경험을 할 수 있다. 저자가 UI 디자이너의 시각에서 프로그래밍에 대한 생각을 공유하기 때문에 여타 기본서보다는 디자이너에게 좀 더 익숙한 표현으로 프로그래밍을 배울 수 있을 것이다.

★ 이 책에서 다루는 내용 ★
■ 제이쿼리 라이브러리를 내려받아 웹 사이트에 포함하기
■ 사진 갤러리와 멋진 애니메이션 효과가 적용된 슬라이드쇼, 캐러셀, 슬라이더 만들기
■ 플러그인을 사용하지 않고도 몇 줄의 코드로 탭 인터페이스 구현하기
■ 사이트에 어울리고 방문자가 편하게 사용할 수 있는 나만의 스크롤바 만들기
■ Ajax를 사용해 전체 페이지 대신 변경된 콘텐츠 영역만 불러오기
■ 애니메이션과 나만의 툴팁을 적용해 사이트 탐색을 손쉽게 만들기
■ 사이트 방문자가 쓰기 편한 웹 양식 만들기

★ 이 책의 대상 독자 ★
HTML과 CSS는 어느 정도 알고 있지만, 자바스크립트와 제이쿼리의 세계로 한발 더 내딛고자 하는 웹 디자이너를 위한 책이다.

★ 이 책의 구성 ★
1장, ‘웹 디자이너, 제이쿼리를 만나다’에서는 제이쿼리 라이브러리를 소개하고 자바스크립트가 어떤 것인지 알려준다. 제이쿼리의 어떤 매력이 디자이너의 마음을 들뜨게 하는지 알 수 있으며, 전문 프로그래밍 지식 없이도 환상적이고 특별한 효과를 어떻게 만들어낼 수 있는지 배워볼 것이다. 그리고 부담 없이 배울 수 있을 정도로만 자바스크립트를 알려주며 첫 번째 자바스크립트 코드를 직접 만들어볼 것이다.

2장, ‘링크 다루기’에서는 링크의 기능을 확장하는 기본적인 방법을 살펴볼 것이다. 제이쿼리에서 새로운 창에 링크를 보여주기 위해서 어떻게 해야 하는지 배워가면서 링크에 아이콘을 추가하거나 링크 목록을 탭 형식의 인터페이스로 구성하는 방법도 살펴볼 것이다.

3장, ‘좋아 보이는 FAQ 페이지 만들기’에서는 HTML 문서를 탐색하고 필요한 요소를 이동시키는 방법뿐 아니라 콘텐츠를 접거나 보여주는 방식을 소개할 것이다. 기본적인 FAQ 목록을 먼저 만들고 사용자가 쓰기 편하게 개선해나가는 과정을 따라가 볼 것이다.

4장, ‘나만의 스크롤바 만들기’에서는 제이쿼리 플러그인을 처음 만나본다. 제이스크롤페인 플러그인을 사용해 웹 브라우저에 상관없이 원하는 대로 보이는 개성 있는 스크롤바를 만들어볼 것이다. 스크롤바를 설정하고 디자인을 수정하고 스크롤바의 움직임까지 나만의 것으로 구현해볼 것이다.

5장, ‘나만의 툴팁 만들기’에서는 웹 브라우저에서 제공하는 기본 툴팁 대신 큐팁 플러그인을 사용할 것이다. 단순한 툴팁 기능을 넘어서 내비게이션 바 위에서 추가적인 정보를 보여주는 기능을 더해볼 것이다.

6장, ‘인터랙티브 내비게이션 메뉴 만들기’에서는 완벽하게 동작하는 정말로 멋진 드롭다운 메뉴와 플라이아웃 메뉴를 만들어볼 것이다. 이렇게 동작하는 메뉴를 만들려면 복잡한 CSS를 작성해야 하는데, 슈퍼피시 플러그인을 사용하면 간단하게 개성 있는 메뉴를 만들어볼 수 있다.

7장, ‘비동기 내비게이션’에서는 Ajax 개념을 소개하고 약간의 제이쿼리 코드만으로 단순했던 웹 페이지를 하나의 페이지로 구성된 웹 앱으로 바꾸는 작업을 보여준다. 간단한 예제에서 시작해서 이전 페이지로 돌아갈 수 있는 뒤로 가기 버튼을 지원하는 기능을 추가해본다.

8장, ‘라이트박스로 콘텐츠 보여주기’에서는 컬러박스 제이쿼리 플러그인을 사용해서 라이트박스 위에서 사진을 보여주고 슬라이드쇼까지 구현해보는 과정을 살펴볼 것이다. 이를 응용하면 깔끔한 로그인 창을 만들거나 비디오 재생 목록으로 확장해볼 수 있고 웹사이트 갤러리 형식으로도 꾸며볼 수 있다.

9장, ‘슬라이드쇼 만들기’에서는 이미지 슬라이드쇼를 구현하는 몇 가지 방법을 살펴볼 것이다. 먼저 크로스페이드(페이드인과 페이드아웃이 동시에 이뤄지는) 형식으로 직접 슬라이드쇼 예제를 만들어볼 것이다. 그러고 나서 크로스슬라이드 플러그인, 니보 슬라이더 플러그인, 갤러리픽 플러그인을 활용해 다양한 유형의 슬라이드쇼를 만나볼 것이다.

10장, ‘캐러셀과 슬라이더로 콘텐츠 다루기’에서는 캐러셀(Carousel)(회전식 슬라이드쇼), 뉴스 티커, 슬라이더가 어떤 식으로 사용되는지 소개하며 제이캐러셀 제이쿼리 플러그인의 도움을 받아 이를 구현해볼 것이다. 가로 방향으로 움직이는 캐러셀을 만들고 세로 방향으로 움직이는 뉴스 티커와 콘텐츠 슬라이더를 만들어볼 것이다. 그리고 플러그인을 활용해 캐러셀에 슬라이드쇼를 어떻게 통합할 수 있는지도 살펴볼 것이다.

11장, ‘인터랙티브 데이터 그리드 만들기’에서는 간단한 HTML 테이블에서 다양한 기능이 추가된 데이터 그리드로 변신하는 과정을 살펴볼 것이다. 사용자들이 데이터를 직접 검색해보거나 원하는 대로 정렬할 수 있는 기능을 추가해본다.

12장, ‘멋진 입력 양식 만들기’에서는 단순한 입력 양식이 어떻게 바뀌는지 살펴볼 것이다. HTML5에서 form 요소를 사용해 HTML 태그만으로 입력 양식을 만들어볼 것이다. 첫 번째 필드에 커서가 자동으로 배치되는 기능을 추가하고, 힌트 문자(placeholder text)를 사용해 사용자가 어떤 항목을 입력해야 하는지 쉽게 알 수 있게 하며, 잘못 입력된 항목을 사전에 점검할 수 있는 기능을 추가한다. 마지막으로, 유니폼 제이쿼리 플러그인을 사용해 딱딱하고 다루기 어려웠던 입력 양식을 어떤 웹 브라우저에서든 일관성 있게 보이도록 디자인을 구성해볼 것이다.

1장 디자이너, 제이쿼리를 만나다
___제이쿼리란?
___제이쿼리는 왜 디자이너에게 근사한 도구인가?
______익숙한 CSS 선택자를 사용한다
______이미 알고 있는 HTML 문법을 사용한다
______짧은 코드로 인상적인 효과 보여주기
______당장 사용할 수 있는 수많은 플러그인
______대단한 커뮤니티를 만나보자
___자바스크립트 기초
______점진적 향상과 적절한 낮춤
______서로 분리해보자
___디자이너, 자바스크립트를 만나다
______변수
______오브젝트
______함수
___제이쿼리를 내려받고 시작할 준비하기
___실습 예제: 제이쿼리 내려받기
___제이쿼리를 사용하는 또 다른 방법
___처음 만나는 제이쿼리 스크립트
___실습 예제: 제이쿼리를 만나보자
______단락 추가하기
___실습 예제: 새로운 단락 추가하기
___정리

2장 링크 다루기
___새로운 창에 링크 열기
______target 속성을 그냥 사용하면 안 되나?
___실습 예제: 새로운 창에서 링크 열기
___링크에 아이콘 추가하기
___실습 예제: 링크 목록 만들기
___간단한 탭
___실습 예제: 간단한 탭 만들기
___정리

3장 좋아 보이는 FAQ 페이지 만들기
___FAQ 페이지 마크업
___실습 예제: HTML 준비하기
___실습 예제: HTML 문서 움직이기
___FAQ 페이지를 맵시 있게 만들기
___실습 예제: 맵시 있게 만들기
___이제 거의 다 왔다!
___실습 예제: 마무리 작업
___정리

4장 나만의 스크롤바 만들기
___디자이너, 플러그인을 만나다
______플러그인 선택하기
___스크롤이 있는 HTML 준비하기
___실습 예제: 스크롤이 있는 HTML
___나만의 스크롤바 추가하기
___실습 예제: 간단한 나만의 스크롤바 만들기
___화살표 추가하기
___실습 예제: 위, 아래 화살표 추가하기
___나만의 스크롤바 스타일 만들기
___실습 예제: 나만의 스타일 추가하기
___부드러운 스크롤
___실습 예제: 부드러운 스크롤 설정하기
___정리

5장 나만의 툴팁 만들기
___간단한 텍스트 툴팁
___실습 예제: 간단한 텍스트 툴팁
___큐팁을 맵시 있게 만들기
___실습 예제: 큐팁 맵시 있기 만들기
___나만의 툴팁 스타일
___실습 예제: 나만의 툴팁 스타일 만들기
___툴팁을 이용한 내비게이션 기능 향상
___실습 예제: 맵시 있는 내비게이션 바 만들기
___툴팁에서 그 밖의 콘텐츠 보여주기
___실습 예제: 나만의 Ajax 툴팁 만들기
___정리

6장 인터랙티브 내비게이션 메뉴 만들기
___수평 방향 드롭다운 메뉴
___실습 예제: 수평 방향 드롭다운 메뉴 만들기
___실습 예제: 제이쿼리로 드롭다운 메뉴 개선하기
___수직 플라이아웃 메뉴
___실습 예제: 수직 플라이아웃 메뉴 만들기
___나만의 내비게이션 메뉴 만들기
______:hover / .sfHover
______다단계로 물려받는 스타일
___웹 브라우저 접두사
___실습 예제: 나만의 슈퍼피쉬 메뉴 만들기
______나만의 애니메이션
___실습 예제: 나만의 애니메이션 추가하기
___호버인덴트 플러그인
___실습 예제: 호버인덴트 플러그인 추가하기
___정리

7장 비동기 내비게이션
___간단한 비동기 내비게이션
___실습 예제: 간단한 웹사이트 설정하기
___실습 예제: Ajax 마법 더하기
___고급스런 비동기 내비게이션
___실습 예제: 고급스런 비동기 내비게이션 만들기
___실습 예제: 비비큐 플러그인 사용하기
___실습 예제: 내비게이션에서 현재 페이지 강조하기
___실습 예제: 로딩 애니메이션 추가하기
___정리

8장 라이트박스로 콘텐츠 보여주기
___간단한 사진 갤러리
___실습 예제: 간단한 사진 갤러리 만들기
___컬러박스의 기능 확장하기
______화면 전환
___실습 예제: 전환 효과 바꿔보기
______크기 고정하기
___실습 예제: 크기 고정하기
______슬라이드쇼 만들기
___실습 예제: 슬라이드쇼 만들기
___멋진 로그인창
___실습 예제: 멋진 로그인 양식 만들기
___비디오 플레이어
___실습 예제: 라이트박스에서 비디오 보여주기
___단일 페이지 웹 갤러리
___실습 예제: 단일 페이지 웹 갤러리 만들기
___정리

9장 슬라이드쇼 만들기
___슬라이드쇼 구성하기
___간단한 크로스페이드 슬라이드쇼
___실습 예제: 간단한 크로스페이드 슬라이드쇼 만들기
___니보 슬라이더
___실습 예제: 니보 슬라이더 슬라이드쇼 만들기
___갤러리픽 슬라이드쇼
___실습 예제: 갤러리픽 슬라이드쇼 만들기
___크로스슬라이드 플러그인
___실습 예제: 크로스슬라이드 슬라이드쇼 만들기
___정리

10장 캐러셀과 슬러이더로 콘텐츠 다루기
___제이캐러셀 기본
___실습 예제: 간단한 캐러셀 만들기
___움직이는 뉴스 티커
___실습 예제: 움직이는 뉴스 티커 만들기
___콘텐츠 슬라이더
___실습 예제: 콘텐츠 슬라이더 만들기
______페이지 이동하기 기능
___실습 예제: 페이지 이동하기 기능 추가하기
______다음/이전 버튼
___실습 예제: 다음/이전 버튼 추가하기
___캐러셀 슬라이드쇼
___실습 예제: 섬네일 슬라이드쇼 만들기
______슬라이드쇼
___실습 예제: 슬라이드쇼 추가하기
______다음/이전 버튼
___실습 예제: 다음/이전 버튼 활성화하기
___정리

11장 인터랙티브___데이터 그리드 만들기
___기본 데이터 그리드
___실습 예제: 기본 데이터 그리드 만들기
___데이터 그리드 디자인하기
___실습 예제: 데이터 그리드 디자인하기
___정리

12장 멋진 입력 양식 만들기
___HTML5 입력 양식
___실습 예제: HTML5 입력 양식 설정하기
___포커스 설정하기
___실습 예제: 첫 번째 입력 필드에 포커스 설정하기
___힌트 문자
___실습 예제: 힌트 문자 추가하기
___사용자 입력 값 검증하기
___실습 예제: 즉석에서 입력 값 바로 검증하기
___멋진 디자인 만들기
___실습 예제: 멋진 양식 디자인 만들기
______애매한 요소 디자인하기
___실습 예제: 애매한 요소를 디자인할 수 있게 유니폼 플러그인 추가하기
______나머지 디자인하기
___실습 예제: 나머지 디자인하기
______나만의 테마 만들기
___실습 예제: 나만의 유니폼 테마 만들기
___정리
[ 저자 ]

나탈리 맥리(Natalie MacLees)
웹 개발자이자 UI 디자이너인 나탈리 맥리는 로스앤젤레스에서 크라우드소싱을 바탕으로 흩어져 있는 가족 정보를 하나의 가계도로 만들어주는 서비스인 지니(geni.com) 개발팀에서 일하고 있다. 노엘 소우(Noel Saw)와 함께 남부 캘리포니아 워드프레스 사용자 그룹(socalwp.org)을 이끌고 있으며 비정기 모임과 세미나, 워크숍을 주관하고 있다. 2010년에는 에이프릴 호지 실버(April Hodge Silver)가 쓴 『WordPress 3 Complete』의 기술 감수자로 참여했다. 개인 홈페이지는 nataliemac.com이다.
웹에 대한 그녀의 열정은 1996년 처음 컴퓨터를 사서 첫 번째 웹사이트를 만들면서 시작됐다. 오프라인에서는 농구 시합 관람, 공예품 만들기, 책 읽기, 요리하기, 벨리댄스, 헬로키티 아이템 모으기를 즐기며 아보카도와 올리브는 절대 먹지 않는다. 로스앤젤레스에 살면서 주근깨가 많아지는 것을 걱정하면서도 일광욕을 즐기며 언제까지나 개발자로 살 수 있기를 희망한다.

[ 옮긴이 ]

이준하
현재 ㈜투비소프트에서 개발자들의 행복한 삶을 위해 노력하고 있으며 '열이아빠의 RIA 이야기(http://koko8829.tistory.com)'라는 블로그를 통해 다양한 시각을 나누고 새로운 경험을 중심으로 나타나는 여러 가지 현상을 탐구하고 있다. 최근에는 기업 환경에 최적화된 RIA 솔루션을 고민하며 페이스북 페이지 BizRIA(http://www.facebook.com/BizRIA)에서 다양한 인사이트를 공유하는 데 많은 관심을 갖고 있다.

등록된 서평이 없습니다.
 
전체평균(0)
회원평점   회원서평수 0
에이콘 출판사의 신간
게임 테스팅 3/e
찰스 슐츠 , 로버트 덴튼 브라이언트 [옮긴이]진석준 저
31,500원
(10%↓+1%)
 
순수 함수형 데이터 구조
크리스 오카사키 [옮긴이] 오현석 저
31,500원
(10%↓+5%)
 
빅데이터 시각화
제임스 밀러 [옮긴이]최준규, 강형건 저
25,200원
(10%↓+5%)
 
자바 데이터 분석
존 R. 허바드 [옮긴이] 김명훈 저
31,500원
(10%↓+5%)
 
보안 빅데이터 분석 플랫폼 구축과 활용
김대용 저
31,500원
(10%↓+5%)
 
이메일주소수집거부