강의 특징

• ㆍ웹 UI 구현부터 클라이언트 측 코드의 이해, 그리고 포트폴리오까지
• ㆍ기초부터 시작하는 스타트업 과정



• ㆍ프론트엔드 개발자로써 필요한 UI구현 기술부터 클라이언트 즉 코드를 직접 하드코딩으로 배우는 실무과정입니다.
• ㆍHTML, CSS 고유의 특성과 작동원리를 여러분이 이해하고 머리속으로 연상(생각)을 한 후 코드로 옮기는 기술을 배웁니다.
•     여기서 디자인된 작업물을 어떻게 코드로 설계할지 생각하는 훈련이 가장 중요합니다.
•     우리는 ‘브라우저 입장에서 생각하는 훈련’을 하고, CSS3의 특성을 배워갑니다.
• ㆍJavascript의 기초문법을 이해하고 직접 코드를 만들어서 UI를 제어하게 되며,
•     실무 프로젝트 방식으로 진행하는 포트폴리오를 만들면서 프론트엔드 개발 전반에 대한 역량을 키워갑니다.

수강대상

• 프론트엔드 개발 취업 희망자
  프론트엔드 개발 포트폴리오
  구축 희망자
• HTML5, 웹 접근성을 포함한
  기술을 습득하고 싶은 자
  웹 클라이언트(서버) 전체에 대한
  이해를 하기 위한 자
• 디자인 영역에서 퍼블리싱까지
  영역을 확장하고 싶은 자
  프리랜서 디자이너 및 기획자

커리큘럼

• 
• 01. The Basic
• 웹의 이해
  HTML과 HTML5
  웹 표준과 웹 접근성

• 
• 02. HTML
• HTML 1 : 정보의 기본구조 - HTML의 속성과 구조
  HTML 2 : 정보 시맨틱 구성 - 시멘틱 요소와 HTML5에서 추가된 아웃라인
  HTML 3 : 서식요소 - HTML5에서 강화된 서식기능과 요소
  HTML 4 : 새로운 정보 형태 - 멀티미디어 요소 등 새로 추가된 정보 형태
  HTML 5 : 웹&모바일 퍼블리싱 – Header, Navigation, Footer, Banner, LNB, 게시판

• 
• 03. CSS
• CSS 1 : 개념과 기초 - CSS3 선택자 집중 학습, 단위 및 컬러
  CSS 2 : Box Model, Positioning과 관련 속성 - 다양한 Layout 학습 (가변형, 고정형)
  CSS 3 : Text와 Font 관련 속성 – Shadows, Transitions, Gradients
  CSS 4 : 2D & 3D Transform과 Animation 관련 속성

• 
• 04. 미디어쿼리 / 반응형 웹
• 미디어 쿼리를 사용한 반응형 웹사이트 제작 실습
  - 사례중심의 반응형웹사이트 분석과 이해

• 
• 05. Javascript
• JavaScript 기초 (Core)
  - 출력문, 데이터형, 연산자, - 변수, 배열, 객체, 함수의 이해
  JavaScript 기초 (DOM, BOM)
  - 문서(document) 조작 명령, - 브라우저(window) 조작 명령
  이벤트의 이해
  - 이벤트의 동작원리, - 주요 이벤트 종류 및 특성 이해

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

• 
• 07. UI 개발 실무
• Image Slide 개발 실습 초급 & 중급
  Sliding Banner 개발 실습
  내비게이션 개발 초급 & 중급
  팝업창 띄우기 (새창, 레이어)
  UI 개발시 접근성 준수 기법
  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

• 
• 08. 포트폴리오 실무 프로젝트
• 포트폴리오 프로젝트 #1 _ 웹퍼블리싱 포트폴리오
  포트폴리오 프로젝트 #2 _ UI 개발 포트폴리오

 강사소개