강의 개요
JavaScript 와 jQuery 를 사용한 웹 사이트 및 모바일 웹 UI 개발
HTML/CSS 웹표준 기술을 다루는데 조금 익숙해지신 분들이라도
jquery/javascript를 이용한 웹사이트 및 모바일 웹 UI 개발에는
쉽게 접근하지 못하는 경우가 많습니다.
최근 플랫하고 미니멀한 디자인이 트렌드가 되면서
동적으로 인터렉티브한 효과를 줄 수 있는 UI개발의 필요성이 더욱 높아지고 있습니다.
플러그인 활용으로만 jquery를 사용하셨던 분들이라면, javascript의 원리를 이해하고
스스로 UI를 제작하여 마음대로 수정/활용하는 것에 많은 갈증을 느끼셨을 것입니다.
jQuery/javascript의 기본 원리부터 학습하여 UI를 원하는대로 만들어내고
구현하는 훈련을 통해 웹접근성이 준수된 UI개발 및 모바일 기기에서도
사용가능한 UI제작을 습득하는 것이 강의목표입니다. 보다 효율적이고
자유롭게 작업할 수 있게 되는, 개인의 능력을 향상시킬 좋은 기회가 될 것입니다.
강의 특징
- - HTML, CSS, JavaScript(jQuery) 등 웹 표준 기술의 이해
- - 브라우저의 이벤트 동작 원리 이해
- - 웹 접근성이 준수된 UI 개발 (키보드 등 다양한 입력장치 고려)
- - 모바일 기기에서도 사용가능한 Touch 이벤트 활용
- - 다양한 라이브러리를 활용하여 캘린더, 로컬 스크롤, Chart 등 구현
- - 재사용이 가능한 함수형태의 UI 소스 구현
수강대상
-
웹사이트 및 모바일웹 UI 개발을 배우고자
하는 디자이너, 퍼블리셔, 개발자 -
동적인 인터랙션이 있는 UI를
직접 제작 / 구현하고 싶으신 분 -
HTML/CSS에 대한
기본지식을 보유해야 함
커리큘럼
- HTML5/CSS 복습
-
HTML / HTML5 태그의 의미
HTML 주요 속성
CSS / CSS3 선택자 및 주요 명령어
Box Model 및 Positioning 이해
- JavaScript 기초
-
JavaScript Core
JavaScript DOM (Document Object Model)
JavaScript BOM (Browser Object Model)
기초 실습
- jQuery 기초
-
jQuery 기본 문법 및 셀렉터
jQuery 주요 메서드
기초 실습
- UI 개발 실습 1
-
이벤트의 이해
기본동작 제거 / preventDefault()
기본형 내비게이션
Tab 및 기본형 배너
- UI 개발 실습 2
-
Timing 콘트롤 (자동롤링)
- 응용형 배너
함수화 기법
Form UI 개발 (이미지, 파일첨부 등)
- UI 개발 실습 3
-
캘린더 UI
스크롤 콘트롤<
Drag & Drop
라이브러리 활용 (iScroll, jQuery UI, Chart 등)
- 모바일 UI 개발 실습 1
-
모바일에서의 이벤트 이해
CSS3 Transform / Transition
Drag & Drop (모바일 버전)
Swipe 구현
- 모바일 UI 개발 실습 2
-
모바일 로컬 스크롤 구현
Zoom In / Out
Rotate
강사소개
강사
이시영
현) 디노웍스㈜ 대표
방위사업청 사업관리본부 운영 아키텍트
웹표준솔루션 포럼 회원사
KAIST 산업공학과 (석사)
주요프로젝트
주요 금융사 및 대기업 웹 접근성 개선 컨설팅 및 구축 사업
현대건설, CJ 그룹, 기아자동차, IBK 기업은행, 국민카드 등