|
진행일자
|
|
|
2017. 4. 3. (월)
19:00~22:00 |
최신 웹프론트엔드 소개
- ECMAScript 2015,2016 소개
- TypeScript 소개
- 최신 프레임워크 소개
- UI개발자 VS 웹앱 개발자
- UI개발자 전체 스터디 로드맵 |
김춘경 대표
웹동네
|
|
진행일자
|
|
|
2017. 4. 5. (수)
19:00~22:00 |
변수
- Lesson 01 변수란
- Lesson 02 변수 만들기
- Lesson 03 변수에 저장할 수 있는 데이터
- Lesson 04 변수 값 저장 및 변경
- Lesson 05 변수 값이 자동으로 읽어지는 경우
- Lesson 06 변수를 활용한 데이터 중복제거 및 재 사용
- Lesson 07 변수에 어떤 값이 들어 있는지 확인하기
- Lesson 08 주석
- Lesson 09 배열
- Lesson 10 변수 종류
- Lesson 11 미션
연산자
- Lesson 01 숫자 연산자
- Lesson 02 문자 연산자
- Lesson 03 복합 연산자
- Lesson 04 증감 연산자
- Lesson 05 연산자 우선순위
- Lesson 06 미션
부록01: 완전 초보자를 위한 함수와 클래스 개념
- Lesson 01 초보자를 위한 함수
- Lesson 02 초보자를 위한 클래스 |
|
|
진행일자
|
|
|
2017. 4. 7. (금)
19:00~22:00 |
형변환
- Lesson 01 형변환이란?
- Lesson 02 암시적 형변환
- Lesson 03 명시적 형변환
- Lesson 04 미션
- 미션 01-숫자를 문자로 형변환
- 미션 02-문자를 숫자로 형변환
부록02: 완전 초보자를 위한 jQuery 개념
- Lesson 01 jQuery 소개
- Lesson 02 jQuery 사용법
조건문 if
- Lesson 01 조건문 이란?
- Lesson 02 if문 이란?
- Lesson 03 논리 비교 연산자
- Lesson 04 if에 논리 비교 연산자 연동하기
- Lesson 05 1단계 if
- Lesson 06 2단계 if
- Lesson 07 3단계 if
- Lesson 08 조건부 연산자
- Lesson 09 미션
조건문 swich
- Lesson 01 switch문이란?
- Lesson 02 if와 switch 차이점
- Lesson 03 미션 |
|
|
진행일자
|
|
|
2017. 4. 10. (월)
19:00~22:00 |
반복문 for
- Lesson 01 반복문이란?
- Lesson 02 for문
- Lesson 03 단일 for문
- Lesson 04 continue문과 break 문
- Lesson 05 다중 for문
- Lesson 06 미션
반복문 while
- Lesson 01 while문이란?
- Lesson 02 for와 while 차이점
- Lesson 03 continue와 break 문
- Lesson 04 미션 |
|
|
진행일자
|
|
|
2017. 4. 12. (수)
19:00~22:00 |
함수기초
- Lesson 01 함수란?
- Lesson 02 가장 쉬운 함수 만들기
- Lesson 03 지역변수 VS 전역변수
- Lesson 04 매개변수가 있는 함수 만들기
- Lesson 05 리턴 값이 있는 함수 만들기
- Lesson 06 함수이름 만들 때 주의 사항
- Lesson 07 미션 |
|
|
진행일자
|
|
|
2017. 4. 14. (금)
19:00~22:00 |
함수기능
- Lesson 01 함수 기능 소개
- Lesson 02 함수 기능1: 중복 코드 제거 및 코드
- Lesson 03 함수 기능2: 코드 그룹화
- Lesson 04 미션
함수중급
- Lesson 01 변수와 함수와의 관계
- Lesson 02 함수 리터럴과 익명 함수
- Lesson 03 함수 정의 방법 4가지
- Lesson 04 함수 종류
- Lesson 05 중첩함수
- Lesson 06 콜백함수
- Lesson 07 클로저함수
- Lesson 08 미션 |
|
|
진행일자
|
|
|
2017. 4. 17. (월)
19:00~22:00 |
최종결과물 제작하기
- 탭메뉴 제작하기 |
|
|
진행일자
|
|
|
2017. 4. 19. (수)
19:00~22:00 |
타이머 함수
- Lesson 01 타이머 함수 소개
- Lesson 02 핵심 내용
- Lesson 03 미션
Math 클래스
- Lesson 01 Math 클래스 소개
- Lesson 02 핵심 내용
- Lesson 03 미션
String 클래스
- Lesson 01 String 클래스 소개
- Lesson 02 핵심 내용
- Lesson 03 미션
Array 클래스
- Lesson 01 Array 클래스 소개
- Lesson 02 핵심 내용
- Lesson 03 미션
최종 결과물
- 롤링 배너 제작하기 |
|
|
진행일자
|
|
|
2017. 4. 21. (금)
19:00~22:00 |
자바스크립트 DOM
- Lesson 01 자바스크립트 DOM과 jQuery와의 관계
- Lesson 02 DOM 소개와 기능
- Lesson 03 DOM 구조
- Lesson 04 DOM과 HTML 페이지와의 관계
- Lesson 05 핵심 DOM 객체
jQuery 소개
- Lesson 01 jQuery란?
- Lesson 02 jQuery 학습방법
- Lesson 03 jQuery를 사용하는 이유
- Lesson 04 jQuery 개발 환경 설정
- Lesson 05 jQuery의 정체
노드찾기
- Lesson 01 일반 노드 찾기
- Lesson 02 찾은 노드 다루기
- Lesson 03 자식 노드 찾기
- Lesson 04 부모 노드 찾기
- Lesson 05 조상 노드 찾기
- Lesson 06 형제 노드 찾기
- Lesson 07 미션 |
|
|
진행일자
|
|
|
2017. 4. 24. (월)
19:00~22:00 |
노드 생성/추가/삭제/이동
- Lesson 01 노드 생성 및 추가
- Lesson 02 노드 추가
- Lesson 03 노드 삭제
- Lesson 04 노드 이동
스타일 다루기
- Lesson 01 스타일 다루기
- Lesson 02 미션
속성 다루기
- Lesson 01 속성 다루기
- Lesson 02 미션
- 미션-360도 이미지 뷰어 만들기
이벤트 다루기
- Lesson01 이벤트란?
- Lesson02 핵심 내용
- Lesson03 미션 |
|
|
진행일자
|
|
|
2017. 4. 26. (수)
19:00~22:00 |
위치/크기 다루기
- Lesson 01 요소의 위치 및 크기 관련 기능
- Lesson 02 문서의 위치 및 크기 관련 기능
- Lesson 03 화면의 위치 및 크기 관련 기능
- Lesson 04 윈도우의 위치 및 크기 관련 기능
- Lesson 05 마우스의 위치 및 크기 관련 기능
- Lesson 06 미션
효과 다루기
- Lesson 01 jQuery 애니메이션 효과 소개
- Lesson 02 기본 효과 다루기
- Lesson 03 사용자 정의 효과 만들기
- Lesson 04 미션
최종결과물
- 스크롤 효과 메뉴 제작하기 |
|
|
진행일자
|
|
|
2017. 4. 28. (금)
19:00~22:00 |
UI제작 관련 CSS3 #01
- Lesson 01 플렉스박스(Flexbox) 레이아웃 소개와 활용법
- Lesson 02 전환 효과(Transition) 소개와 활용법
- Lesson 03 변환 효과(Transform) 소개와 활용법 |
|
|
진행일자
|
|
|
2017. 5. 8. (월)
19:00~22:00 |
UI제작 관련 CSS3 #02
- Lesson 04 필터 효과 소개와 활용법
- Lesson 05 3D 효과 소개와 활용법
- Lesson 06 애니메이션 소개와 활용법 |
|
|
진행일자
|
|
|
2017. 5. 10. (수)
19:00~22:00 |
최종 결과물
- 3D 큐브 배너 제작
- 양면 페이지 제작
- 다양한 이미지 배열 효과 제작 |
|
|
진행일자
|
|
|
2017. 5. 12. (금)
19:00~22:00 |
UI제작 관련 SVG #01
- Lesson 01 기본 도형 그리기
- Lesson 02 전환 효과(Transition) 소개와 활용법
- Lesson 03 변환 효과(Transform) 소개와 활용법
- Lesson 04 필터 효과 소개와 활용법 |
|
|
진행일자
|
|
|
2017. 5. 15. (월)
19:00~22:00 |
UI제작 관련 SVG #02
- Lesson 05 클리핑(Clipping) 소개와 활용법
- Lesson 06 마스킹(Clipping) 소개와 활용법
- Lesson 07 이벤트 처리 방법
- Lesson 08 애니메이션 쇼과 활용법 |
|
|
진행일자
|
|
|
2017. 5. 17. (수)
19:00~22:00 |
최종 결과물
- 도형 애니메이션 효과
- SVG 애니메이션 효과
- 스크롤 효과 + SVG 애니메이션 효과 활용 |
|
|
진행일자
|
|
|
2017. 5. 19. (금)
19:00~22:00 |
최종 결과물 #01
- 활용01. 이미지 슬라이더(JS+jQuery)
- 활용02. 원형 메뉴(JS+jQuery+CSS3+SVG) |
|
|
진행일자
|
|
|
2017. 5. 22. (월)
19:00~22:00 |
최종 결과물 #02
- 활용03. 3D 반응형 메뉴(JS+jQuery+CSS3)
- 활용04. 3D 카드 갤러리(JS+jQuery+CSS3) |
|
|
진행일자
|
|
|
2017. 5. 24. (수)
19:00~22:00 |
최종 결과물 #03
- 활용05. 3D 팜플릿(JS+jQuery+CSS3)
- 활용06. 3D Map(JS+jQuery+CSS3+SVG) |
|