| HTML
|
- (Sublime Text Editor)
- Editor 설치 및 필수 plugin 설치
- Emmet (GenCoding) 사용법
- (다양한 html template 과 기본 마크업 구성)
- html4 template
- html4 xml template
- html5 template
- head, body, meta, title 구성
- (HTML Basic)
- div , p 요소
- span, strong 요소
- ul , ol 요소
- h1 ~ h6 요소
- img 요소를 이용한 이미지 출력
- (Table)
- thead, tbody, tfoot
- tr, th, td, col
- 셀합치기
- (form 요소)
- input, select, option
- 웹 접근성에 부합하는 form구성
- (html5 의 sementic markup)
- nav, header, footer
- section, aside, article
- figure, figcaption, mark, summary
|
16H |
| CSS
|
- (Selector)
- css 기본 문법
- id, class, element 기본 선택자
- 자식, 자손, 속성 등 다양한 선택자
- (Display)
- inline, block, inline-block
- table, table-cell
- (Position)
- static, relative, absolute, fixed
- (Backgrounds)
- background-color, background-image, background-repeat
- background-position
- (Box Model)
- padding, border, margin
- width, height
- (가상요소, 가상 선택자)
- Pseudo-class, Pseudo-element
- (반응형 웹 개발을 위한 CSS)
- Media Query
- Grid System
- (Sample Layout)
- header, side, main, footer, nav 요소 구성
|
40H |
| Java-script |
- (Data Type)
- Boolean, String, Number, Object, Array, Function
- (Data Type 의 활용)
- String <=> Number 변환
- JSON <=> Object 변환
- Object, Array 활용
- Function Type 에 대한 이해
- (Operator)
- 산술연산자
- 논리연산자
- 비교연산자
- 증감연산자
- (Statements)
- if 문, if ~ else 문
- 반복문
- switch 문
- (RegExp)
- 정규표현식 익히기
- form validation 활용
- (Browser BOM)
- Window, Screen, History, Location 객체
- (HTML DOM)
- DOM Docuemnt, Elements, Attributs
- DOM Events, Style
- (HTML Objects)
- java-script 실행환경
- HTML Objects 의 제어
- HTML Objects 의 동적 생성, 추가, 제거
|
40H |
| jQuery
|
- (Selector)
- id, class, element 선택자
- 자식, 자손, 속성 선택자
- (DOM 조작)
- 선택된 문서객체 조작
- 문서객체 동적 생성 및 추가
- (반복문)
- .each() 반복문 활용
- (Animation)
- slide, fade
- .animate() 활용
- custom animation
- (Event)
- window, document 이벤트
- mouse 이벤트, key 이벤트
- form 이벤트
- (Ajax)
- $.ajax() 를 활용한 비동기 통신
- 비동기 form data 전송
- (JQuery Plugin)
- 플러그인의 개념 및 사용법
- fotorama, lazyload, ajaxform, smoothscroll, datepicker 플러그인 사용
|
40H |
| bootstrap |
- (GridSystem)
- Bootstrap builtin GridSystem
- GridSystem 을 활용한 레이아웃 구성 방법
- (Boostrap 내장 css class)
- Typography, Code, Table
- Form, Button, Images
- Helper Class
- (반응형 UI 구현)
- Responsive Utility
- GridSystem 과 Responsive Utility 을 이용한 반응형 layout 구성
- (Bootstrap 내장 component class)
- Glyphicon, Navbar, Nav
- Dropdown Button
- Pagination
- Button Group, Input Group
- (Bootstrap JQuery Plugin)
- Modal, Tab, Tooltip, Popover
- Alert, Collapse
- Carousel, ScrollSpy, Affix
- (Bootstrap 을 활용한 실전 Page 제작)
|
40H |
| CSS 3
|
- (Border Radius)
- Button 과 Image 에 적용
- (Gradient)
- Linear Gradient
- Radial Gragient
- (Shadow)
- Box Shadow
- Text Shadow
- (Transition)
- Transition 효과
- 다양한 Transition timing function
- (Transform)
- translate, rotate, skew
- (Animation)
- keyframe 문법
- keyframe 을 활용한 다양한 Animation 구현
- (3d Transform)
- card flip
- 3d cube
- 3d Transform 을 활용한 입체적인 UI 개발
- (animate.css)
- animate.css 다운로드
- animate.css + jquery 활용
|
40H |
| HTML5 API
|
- (SessionStorage, LocalStorage)
- SessionStorage 객체 활용
- LocalStorage 객체 활용
- (Audio, Video)
- java-script runtime 에서의 audio, video 제어
- (WebSQLDataBase)
- Local DataBase 개념
- table 생성 insert, update, delete, select
- 메모장 Application 개발
- (canvas)
- canvas api 를 활용한 화면 렌더링
- canvas 고급 그리기 및 game 개발
|
32H |
| Node Js Programming
|
- (Express Framework)
- 환경설정
- www 실행파일
- app.js 구성
- (요청처리)
- request, response 객체
- text, html, json, xml 응답
- (require)
- require() 함수에 대한 이해
- java-script 파일 작성 및 require() 된 객체 사용
- (Router)
- Router 객체를 이용한 요청 라우팅 처리
- get, post, put, delete 요청 라우팅
- (parameter)
- get 방식 요청 parameter 추출
- post 방식 요청 parameter 추출
- (ejs)
- ejs 모듈 환경 설정
- 동적 웹페이지 출력
|
32H |
| Angular Js Programming
|
- (MVVM Framework Overview)
- 양방향 데이터 바인딩 테스트
- Default App, Default Controller 사용
- (Controller)
- Custom Controller
- Controller 를 이용한 UI 업데이트
- (Directive)
- ngClass, ngShow, ngHide, ngAnimate, ngSwitch, ng-if
- Bootstrap UI 에 응용
- ngMouse* , ngTouch, ngFocus, ngBlur, ngClick
- ngMouse* 를 이용한 마우스 이벤트 처리
- ngTouch 를 이용한 터치 이벤트 처리
- form 에 관련된 디렉티브
- form validation Angular way
- (UI 응용)
- animate.css 다운로드
- ngAnimate 를 활용한 UI 애니메니션
- (Factory, Provider, Filter)
- Factory 방식
- Provider 방식
- Filter 사용
- (Single Page Web Application)
- 서버환경 구성
- ngRoute 모듈을 이용한 single page Web Application 구현
|
40H |
국비대상자
