자료검색

책소개

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

목차

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