Ⅰ 인터랙션디자인 1

1. 웹디자인기술의 변화 2

2. 개발환경 구성 5



Ⅱ 이미지편집 10

1. 이미지편집 기초 11

2. 포토샵 화면구성과 도구 13

3. 포토샵 툴과 패널 15

4. 포토샵실행 19

5. 브러시사용하기 25

6. Smudge툴을 이용한 불꽃 만들기 31

7. 레이어를 이용한 선택영역 지정 34

8. 레이어 순서 바꾸기 40

9. 캔버스에서 레이어 선택 및 이동 42

10. 선택툴을 이용한 태극모양 만들기 43

11. 사각형 선택툴을 이용한 선택영역지정 50

12. 문서와 문서 사이에 레이어 복사 54

13. 수평 줄무늬 패턴 만들기 57

14. 세로 패턴을 이용한 방사형이미지 만들기 63

15. 디지털색채와 색채조화 68

16. 색채조화 75

17. 컬러선택이 쉬워지는 색상팔레트 81



Ⅲ HTML 및 CSS필수 87

1. 기본개념 88

2. CSS필수 93

3. 그래픽처리를 위한 CSS 44



Ⅳ WebAPI와 100

1. 기본 Web API 소개 101

2. 자바스크립트의 이해 107

3. 변수 109

4. 숫자와 연산자 110

5. 문자열 112

6. 배열 114

7. 함수 116

8. 객체 118

9. 클래스 120



Ⅴ 주요 라이브러리 소개 122

1. GSAP 123

2. Swiper 125



Ⅵ 인터랙션디자인 실습 131

1. 원페이지 반응형 레이아웃 구성 132

2. 마우스를 따라가는 타겟 143

3. 스모크문자 149

4. 3차원 공간에서 회전하는 이미지 154

5. 호버된 이미지가 확대되서 보여지는 효과 158

6. Swiper를 이용한 캐러셀 161