강의 특징

JavaScript 와 jQuery 를 사용한 웹 사이트 및 모바일 웹 UI 개발

 강의 수강을 위한 사전 지식이 필요합니다

• - HTML / CSS를 이용한 웹사이트 퍼블리싱 가능자
• - CSS3의 기본 명령 및 Transition / Animation 등의 Animation 기능 이해
• - 프로그래밍에 대한 기본 지식 (변수, 함수, 제어문 등 기본 내용)

 강의 특징

• - 이론과 실습을 분리하지 않고 준비된 학습 시나리오를 가지고 다양한 예제와 실습, 설명을 통해 진행
• - UI구현 기술부터 클라이언트 즉 코드를 직접 하드코딩으로 배우는 실무과정
• - Javascript의 기초문법을 이해하고 직접 코드를 만들어서 UI를 제어하는 기술 습득
• - 브라우저의 이벤트 동작 원리 이해
• - 웹 접근성이 준수된 UI 개발 (키보드 등 다양한 입력장치 고려)
• - 모바일 기기에서도 사용가능한 Touch 이벤트 활용
• - 다양한 라이브러리를 활용하여 캘린더, 로컬 스크롤, Chart 등 구현
• - 재사용이 가능한 함수형태의 UI 소스 구현

수강대상

• 프론트엔드 개발자 또는
  웹퍼블리셔로서의 취업, 이직 희망자 HTML5, 웹 접근성을 포함한 프론트엔드
  기술을 습득하고 싶은 분
• UI 애니메이션을 직접 제작/구현하고 싶은 분 디자인 영역에서 프론트엔드 기술까지
  영역을 확장하고 싶은 분
• 웹 UI 개발을 배우고자 하는 디자이너
  프리랜서 디자이너 및 기획자
  웹 클라이언트(서버)에 대한 이해를 원하는 분

커리큘럼

• 오리엔테이션
  JavaScript 기초 (Core)
• 출력문, 데이터형, 연산자
  변수, 배열, 객체, 함수의 이해

• JavaScript 기초(DOM, BOM)
  
  
  이벤트의 이해
• 문서(document) 조작 명령
  브라우저(window) 조작 명령
  
  이벤트의 동작원리
  주요 이벤트 종류 및 특성 이해

• jQuery 기초
• 이벤트 조작(on, off, trigger)
  DOM 조작 및 Traversing
  CSS 및 Class 다루기
  Dimension 및 Offset 개념 이해
  기타 유용한 API 소개(this, index, each 등)
  

• Image Slide 개발 실습(초급)
• 이미지 선택, 이전/다음 이미지 표시
  이미지 전환 효과 구현
  개발소스 모듈화 기법(재활용 및 충돌방지)
  UI 설계 기법 (변수, 함수 활용)

• Image Slide 개발 실습(중급)
• 다중 이벤트 처리 및 이벤트간 연계
  timer 다루기 I
  animation 처리 기법

• Sliding Banner 개발 실습
• 사용성 강화를 위한 부가기능 개발 기법
  Image 포함 UI 개발시 유의점
  timer 다루기 II

• 내비게이션 개발(초급, 중급)
  팝업창 띄우기 (새창, 레이어)
  UI 개발시 접근성 준수 기법
• 현재 페이지 표시하기
  data-* 속성을 이용한 상태정보 관리

• Scroll 이벤트 다루기
• 패럴렉스 UI 개발(초급, 중급)
  반응형 웹에서의 UI 개발 기법

• 모바일 이벤트의 이해(touch)
• Drag 이벤트 만들기(웹, 모바일 버전)
  Swipe UI 개발
  모바일 UI 개발시 유의사항

• 모바일 멀티터치를 이용한 UI 개발
• Zoom In, Zoom Out
  Rotate
  Translate

• CSS3와 연계한 UI 효과 구현
• transition 및 animation 기능 이해
  jQuery를 이용한 CSS3 animation 기능 조작
  메인 비주얼 효과 구현
  텍스트 및 버튼, 아이콘 효과 구현

• 관리자 화면(Form)을 위한 UI 구현
• Ajax 기초
  JSON 기초
  관리자용 Form UI 구현 및 데이터 전달
  라이브러리 활용 실습 : iScroll, Calendar, 주소 API, Editor

• UI 포트폴리오 제작 실습
• UI 포트폴리오 만들기

 강사소개