WORKSHOP | 워크샵

워크샵 과정은 다양한 디자인 분야에서도 독자적인 영역을 확보하고 있는 스페셜 교육에 주목합니다.
전문가의 축적된 노하우와 메이킹 스타일을 통해 새로운 크리에이티브의 세계를 경험할 수 있는 스페셜 코스 입니다.

HOME > 워크샵 > 과정소개

프론트앤드 UI 개발 실무 워크샵 : JavaScript & jQuery (23기)

내용 타이틀 이미지
기  간 2018-06-20 - 2018-07-30
시  간 (월/수) 19:00 - 21:50
강  사 이시영
장  소 아카데미정글(강남 신사)
모집인원 20명 [결재선착순 모집]
수강료 680,000원    [카드 2~6개월 무이자할부 가능]

안내 : * 본 강의는 월,수 평일반으로 총 12강이 진행됩니다.

 강의 특징

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

JavaScript와 jQuery를 이용하여
웹/모바일 사이트를 설계, 개발할 수 있는 UI구현 실무과정입니다.


갈수록 복잡하고 빠르게 변하는 웹의 환경에 맞추어 HTML로 구조를 만들고,
CSS로 정교한 스타일링을 하는 기술은 웹/모바일 사이트 제작의 필수 기술입니다.
그러나 HTML, CSS 고유의 특성은 대부분의 프로그래밍 언어와
다른 작동원리를 가지기 때문에 프로그래밍에 능숙한 개발자라도
UI구현은 매우 어려워하는 기술입니다.

반면에 최근 플랫하고 미니멀한 디자인이 트렌드가 되면서 동적으로
인터렉티브한 효과를 줄 수 있는 UI개발의 필요성은 더욱 높아지고 있습니다.
플러그인 활용으로만 jquery를 사용하셨던 분들이라면,
javascript의 원리를 이해하고 스스로 UI를 제작하여
마음대로 수정/활용하는 것에 많은 갈증을 느끼셨을 것입니다.


이 과정은 Query/javascript의 기본 원리부터 학습하여 UI를 원하는 대로 만들어내고 구현하는 훈련을 통해 웹접근성이 준수된 UI개발 및 모바일 기기에서도
사용가능한 UI제작을 가능하게 해줍니다.

크로스 브라우징, 크로스 디바이스를 고려한 UI 스타일링,
클라이언트 서버와 연동하는 기술 구현까지 막힘이 없도록
최적화된 내용으로 커리큘럼이 구성되어 있습니다.

jquery 이미지

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

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

 강의 특징

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

수강대상

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

커리큘럼

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


    이벤트의 이해
  • 문서(document) 조작 명령
    브라우저(window) 조작 명령

    이벤트의 동작원리
    주요 이벤트 종류 및 특성 이해
line 이미지 2
  • jQuery 기초
  • 이벤트 조작(on, off, trigger)
    DOM 조작 및 Traversing
    CSS 및 Class 다루기
    Dimension 및 Offset 개념 이해
    기타 유용한 API 소개(this, index, each 등)
line 이미지 2
  • Image Slide 개발 실습(초급)
  • 이미지 선택, 이전/다음 이미지 표시
    이미지 전환 효과 구현
    개발소스 모듈화 기법(재활용 및 충돌방지)
    UI 설계 기법 (변수, 함수 활용)
line 이미지 2
  • Image Slide 개발 실습(중급)
  • 다중 이벤트 처리 및 이벤트간 연계
    timer 다루기 I
    animation 처리 기법
line 이미지 2
  • Sliding Banner 개발 실습
  • 사용성 강화를 위한 부가기능 개발 기법
    Image 포함 UI 개발시 유의점
    timer 다루기 II
line 이미지 2
  • 내비게이션 개발(초급, 중급)
    팝업창 띄우기 (새창, 레이어)
    UI 개발시 접근성 준수 기법
  • 현재 페이지 표시하기
    data-* 속성을 이용한 상태정보 관리
line 이미지 2
  • Scroll 이벤트 다루기
  • 패럴렉스 UI 개발(초급, 중급)
    반응형 웹에서의 UI 개발 기법
line 이미지 2
  • 모바일 이벤트의 이해(touch)
  • Drag 이벤트 만들기(웹, 모바일 버전)
    Swipe UI 개발
    모바일 UI 개발시 유의사항
line 이미지 2
  • 모바일 멀티터치를 이용한 UI 개발
  • Zoom In, Zoom Out
    Rotate
    Translate
line 이미지 2
  • CSS3와 연계한 UI 효과 구현
  • transition 및 animation 기능 이해
    jQuery를 이용한 CSS3 animation 기능 조작
    메인 비주얼 효과 구현
    텍스트 및 버튼, 아이콘 효과 구현
line 이미지 2
  • 관리자 화면(Form)을 위한 UI 구현
  • Ajax 기초
    JSON 기초
    관리자용 Form UI 구현 및 데이터 전달
    라이브러리 활용 실습 : iScroll, Calendar, 주소 API, Editor
line 이미지 2

 강사소개

line 이미지
이시영 선생님 이미지

강사
이시영


현) 디노웍스㈜ 대표
방위사업청 사업관리본부 운영 아키텍트
웹표준솔루션 포럼 회원사
KAIST 산업공학과 (석사)


주요프로젝트


주요 금융사 및 대기업 웹 접근성 개선 컨설팅 및 구축 사업
현대건설, CJ 그룹, 기아자동차, IBK 기업은행, 국민카드 등

  • ※ 본 강의는 강사, 커리큘럼이 일부 변경되거나 사정으로 인하여 폐강될 수 있습니다.
  • ※ 본 강의 내용은 교육기획자 및 강사와의 협의없이 무단으로 사용될 수 없습니다.
  • ※ 무단사용시 저작권 침해로 인해 처벌받을 수 있음을 알려 드립니다.

포인트안내

  • 포인트는 과정 종료후 마이스터디에 있는 강의평가 버튼을 누른 후 설문조사에 참여하시면, 포인트가 가용 포인트로 전환됩니다.
    (참고로 실제 사용할 수 있는 포인트를 가용 포인트라고 칭합니다.)
    또한, 강의평가 설문조사 사항은 앞으로의 교육 운영에 적극 반영 하도록 하겠습니다. 마이스터디 페이지 바로가기

등록안내

  • - 과정 등록은 온라인으로 신청하시면 됩니다. 결제는 직접 방문, 무통장입금 또는 카드결제가 가능합니다.
  • - 무통장 입금으로 결제를 하실 경우 반드시 신청자 이름으로 입금하셔야지만 확인이 가능합니다.
  • - 등록확인과 취소는 마이스터디에서 확인 하실 수 있습니다.
  • - 계산서가 필요하신 분은 발급 신청란에 내용을 정확하게 기입해 주셔야 하며, 사업자 등록을 하신 분은 회사 찾기로 쉽게 입력하실 수 있습니다.
  • - 환불 규정은 해당 페이지를 참고하시기 바랍니다. 환불규정 보기
  • - 기타 문의 사항은 전화 02-3673-1721 메일 info@ejungle.co.kr
목록으로