추가 적립 안내

실무에서 바로 사용할 수 있는 예제를 하나씩 따라 하며 실무를 배울 수 있게 만들었습니다.

초보자도 손쉽게 배울 수 있게 HTML5, CSS3, jQuery를 활용한 실전 활용 예제를 만든 후 이를 작은 조각으로 나눠 하나씩 따라 하는 과정에서 실무를 배울 수 있게 구성했습니다. 일명 "단계별 학습법"이라고 이름을 정했습니다. 이후 10명은 지금까지 웹 표준 기술로는 만들고 싶어도 만들 수 없었던 웹 콘텐츠를 HTML5, CSS3, jQuery를 활용해 만든 후 단계별 학습법을 적용해 책을 집필하기 시작했습니다.

실무에서 바로 사용할 수 있는 다양한 실무 예제가 무려 14개!

이 책을 집필하기 시작한 후 5개월이 지난 지금, 드디어 이 책이 세상 밖으로 나오게 됐습니다. 예제는 크게 웹디자인 콘텐츠, 웹퍼블리싱 콘텐츠, 웹개발 콘텐츠 분야로 나눠 HTML5, CSS3, jQuery를 다양하게 활용했습니다. 즉, 이 책은 HTML5, CSS3, jQuery를 배우긴 했지만 정작 실무에서 활용하지 못하는 분! 또는 멋진 실무예제를 만들고 싶지만 어디서부터 어떻게 시작해야 할지 몰라서 발만 동동 구르고 있었던 분들을 위한 실무 활용 지침서입니다.
(/ '서문' 중에서)

01장: 그림자 있는 배너

01. 분석하기
- 용어 정리
- 출력 효과 정의
02. 스터디
- 그림자 효과가 적용된 배너를 만드는 데 필요한 CSS 속성
- 모서리가 둥근 배너를 만드는 원리
- 배너에 그림자를 입히는 원리
- 배너에 색상과 광택 효과를 입히는 원리
- 배너와 그림자의 순서(위치)를 정하는 원리
- 그림자의 모양만 변형하기 위한 원리
03. 구현하기
- 진행 순서(단계 나누기)
- 구현 시작
- 제작을 마치며

02장: 아쿠아 버튼

01. 분석하기
- 용어 정리
- 동작 효과 정의
02. 스터디
- 아쿠아 버튼을 만드는 데 필요한 CSS 속성
- 버튼틀을 만들 때 사용하는 CSS 속성
- 글자에 입체감을 주기 위한 CSS 속성
- 버튼을 동적으로 만들어주는 CSS 속성
03. 구현하기
- 진행순서(단계 나누기)
- 구현 시작
- 제작을 마치며

03장: 배너 슬라이더

01. 분석하기
- 용어 정리
- 동작 효과 정의
02. 스터디
- 배너슬라이드를 만드는 데 필요한 CSS 속성
- CSS3 선택자
- transition
- animation
- @Keyframes
03. 구현하기
- 인터랙티브를 위한 구조 잡기
- 진행 순서(단계나누기)
- 제작을 마치며

04장: 탭 레이아웃

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 탭 레이아웃을 만드는 데 필요한 CSS 속성
- 사선 탭을 만드는 원리
- 자연스러운 그림자 효과를 만드는 원리
- 가상 선택자
- 박스 크기에 padding을 주어도 원래 크기로 보이게 하기
03. 구현하기
- 진행 순서(단계 나누기)
- 제작을 마치며

05장: 원형 회전 텍스트 메뉴

01. 분석하기
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 원형 회전 텍스트 메뉴를 만드는 데 필요한 CSS 속성 소개
- 텍스트 메뉴를 회전시키는 원리
- 회전 기준점 변경
03. 구현하기
- 진행 순서(단계 나누기)
- 제작을 마치며

06장: 대각선 메뉴

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 대각선 메뉴를 만드는 데 필요한 CSS 속성
- 비틀어진 메뉴를 만드는 원리
03. 구현하기
- 진행 순서(단계 나누기)
- 제작을 마치며

07장: 폴라로이드 사진 게시판

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 폴라로이드 사진 게시판을 만드는 데 필요한 CSS 속성
- 아이템을 임의의 각도로 회전 시키는 원리
- 임의의 각도를 만드는 원리
- 아이템 등장 효과의 원리
03. 구현하기
- 진행 순서(단계 나누기)
- 구현시작
- 제작을 마치며

08장: 풀 스크린 전자액자

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 풀 스크린 슬라이더를 만드는 데 필요한 CSS 속성
- 이미지를 풀 스크린으로 출력하는 원리
- 아이템 애니메이션 전환 효과의 원리
- 음악 재생 기능
03. 구현하기
- 진행 순서(단계 나누기)
- 구현 시작
- 제작을 마치며

09장: 도넛 메뉴

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 도넛 메뉴를 만드는 데 필요한 CSS 속성
- 애니메이션 기획
- position
- transition
- mask-box-image
- 사용자 정의 속성(data-*)
03. 구현하기
- 진행 순서 (단계 나누기)
- 구현 시작
- 제작을 마치며

10장: SVG를 이용한 룰렛

01. 분석하기
- 용어 정리
- 출력 화면 정의
- 동작 효과 정의
02. 스터디
- SVG 룰렛 제작을 위한 스터디 항목
- SVG 기초
- 룰렛을 만드는 데 필요한 CSS3 속성
03. 구현하기
- 진행순서(단계 나누기)
- 구현 시작
- 제작을 마치며

11장: 그리드 배너

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 그리드 아이템의 3D 회전 효과
- 그리드 아이템 슬라이드 효과
- 슬라이드 배너의 자동 롤링
03. 구현하기
- 진행 순서(단계 나누기)
- 구현 시작
- 제작을 마치며

12장: 3D로 펼쳐지는 효과

01. 분석하기
- 용어 정리
- 출력 효과 정의
02. 스터디
- 3D로 펼쳐지는 효과를 만드는 데 필요한 CSS 속성
- 3D transform
- transition-origin
- webkit-gradient
- IK
03. 구현하기
- 진행 순서 (단계 나누기)
- 구현 시작
- 제작을 마치며

13장: Canvas를 활용한 복권 긁기

01. 분석하기
- 용어 정리
02. 스터디
- 캔버스 사용준비
- 복권 긁기 자국 만들기
- 결과 이미지를 가리는 커버 이미지 그리기
- 복권 긁기 효과 만들기
- 복권 긁기 진행률 알아내기
03. 구현하기
- 진행 순서(단계 나누기)
- 구현 시작
- 제작을 마치며

14장: 모바일 웹 페이지

01. 분석하기
- 용어 정리
- 출력 효과 정의
- 동작 효과 정의
02. 스터디
- 모바일 웹 페이지를 만드는 데 필요한 배경지식 및 CSS 속성
- 모바일 웹 화면은 크기를 어떻게 만들어야 하나?
- box-flex 태그
- gradient, shadow, border-radius
03. 구현하기
- 진행 순서(단계 나누기)
- 구현 시작
- 제작을 마치며