프론트엔드 개발자 (실무프로젝트)

일반
재직자

다른 훈련 과정 보기

닫기

국가직무능력표준(NCS)은 무엇인가요?

국가직무능력표준(NCS, National Competency Standards)은 산업현장에서 직무를 수행하기 위해 요구되는 지식·기술·태도 등의 내용을 국가가 체계화한 것입니다.

닫기

분야

다른 분야 · 훈련과정을 한 눈에 볼 수 있습니다.

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

프론트엔드 개발자 (실무프로젝트)

- 웹에이전시에서 제작하는 최신 트렌드한 웹컨텐츠 구현 해보기
- 크로스브라우징을 지원하면서 플래시처럼 인터렉티브한 웹컨텐츠 개발하기
- 실전에서 바로 사용가능한 예제들을 배워서 실무에 적용하기
- 단순 소스를 가져다 사용하는것이 아니라 직접 코드를 작성해서 만들수 있도록 해줌
- 문법만 배우는것이 아니라 직접해보면서 익힐수 있는 강의 입니다.

웹퍼블리셔로 일하거나 프론트엔드 개발자를 준비하시는 분들
웹표준을 알고 있으며, JavaScript와 jQuery 기초 문법을 학습 하신분
최신 트렌드한 웹기술을 배우시고 싶으신 분들
프론트엔드 개발자로 취업을 위해 포트폴리오가 필요하신 분들

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

프론트엔드 개발자 (실무프로젝트)
강의과목	프론트엔드 개발자 (실무프로젝트)
1일차	최신 웹트렌드와 강의를 통해서 만들어볼 예제 살펴보기 작업환경 셋팅하기 예제) 1단 메뉴를 만들어 보자 마크업 구조 살펴보기 마우스 롤오버, 아웃 만들기 예제) 탭메뉴 만들기 마크업 구조 살펴보기 클릭시 활성화 구현하기
2일차	예제) 자동으로 롤링되는 배너 만들기 마크업 구조 살펴보기 자바스크립트 setinerval 함수에 대해 알아보기 애니메이션을 줘서 자동으로 슬라이드 시키기 예제) 애니메이션되는 1단 메뉴를 만들어 보자 마크업 구조 살펴보기 마우스 롤오버, 아웃 만들기 애니메이션을 사용해 아래로 열리는 메뉴 만들기
3일차	예제) 동적으로 html문서를 읽어와 활용하기 ajax로 html문서를 읽어오자 동적으로 불러온 html문서를 화면에 붙여 주고 css를 적용시켜 보기 예제) 날씨를 알려주는 페이지를 만들자 ajax로 날씨 데이터를 읽어오자 xml데이터를 파싱해서 폼에 맞게 넣기
4일차	jquery-ui draggable, droppable draggable 에서 제공하는 메서드와 옵션 알아보기 droppable 에서 제공하는 메서드와 옵션 알아보기 예제) 드래그하여 완성하는 퍼즐게임 만들기 마크업 구조 살펴보기 퍼즐조각을 드래그하여 맞추도록 개발해보자 slider 에서 제공하는 메서드와 옵션 알아보기
5일차	jquery-ui slider, sortable slider 에서 제공하는 메서드와 옵션 알아보기 sortable 에서 제공하는 메서드와 옵션 알아보기 예제) 360도 vr만들기 마크업 구조 살펴보기 슬라이더를 움직이면 vr이 돌아가도록 개발 예제) 윈도우 탐색기와 같은 ui만들기 마크업 구조 살펴보기 파일을 sorting하여 정렬시켜 주기 폴더에 드래그하면 폴더 안으로 이동시키기
6일차	게시판 페이지 게시판 수정 풋터 페이지 수정 게시판 수정모듈화
7일차	예제 ) 이미지 갤러리 마크업 구조 살펴보기 thumbnail 슬라이드 구현하기 thumbnail 클릭시 해당 이미지 활성화하기 예제) 스크롤 메뉴 만들기 마크업 구조 살펴보기 현재 브라우져의 스크롤값 가져오기 클릭시 해당 메뉴의 콘텐츠로 브라우져 스크롤 시키기 스크롤 위치에 따라 메뉴 활성화 하기
8일차	예제) 2뎁스 메뉴 만들기 마크업 구조 살펴보기 1뎁스 메뉴 구현하기 1뎁스 오버시 2뎁스 나오게 구현 2뎁스 메뉴 구현 링크주소를 읽어 해당 메뉴 활성화하기 예제) parallax scrolling 사이트 만들기 마크업 구조 살펴보기 클릭시 해당 메뉴의 콘텐츠로 브라우져 스크롤 시키기 스크롤 위치에 따라 메뉴 활성화 하기 스크롤 위치에 따라 오브젝트 움직이기
9일차	예제) parallax scrolling 사이트 만들기 마크업 구조 살펴보기 클릭시 해당 메뉴의 콘텐츠로 브라우져 스크롤 시키기 스크롤 위치에 따라 메뉴 활성화 하기 스크롤 위치에 따라 오브젝트 움직이기 예제) i-os와 같은 pull-to-refresh 메뉴 만들기 마크업 구조 살펴보기 엘리먼트에 스크롤 이벤트를 생성시켜 스크롤을 가장 아래로 내렸는지 확인 새로운 데이터를 메뉴아래에 추가시켜 주기
10일차	반응형웹 기초 css3 미디어쿼리 i-scroll라이브러리를 활용한 모바일 flikking 만들기 예제) pc와 모바일에서 다르게 동작하는 반응형 웹사이트 만들기 마크업 구조 살펴보기 css3 미디어쿼리를 적용하여 반응형웹 만들기 pc에서는 jquery 콘텐츠개발 모바일 환경에서는 i-scroll을 적용하여 모바일 환경에 맞도록 변경해 주기
11일차	css3 animation 효과 jquery에서는 지원하지 않는 애니메이션 만들어 보기 예제) i-os의 transition효과를 직접 구현하기 css3 2d transform, 3d transform, transition활용 예제) 3d cube만들어 보기 css3 2d transform, 3d transform, transition활용
12일차	반응형 웹사이트 포트폴리오 만들기 javascript hash event살펴보기 css3 미디어쿼리를 활용하여 반응형 웹사이트 만들기 동적으로 페이지를 불러오고 애니메이션을 적용시켜 주기 브라우저의 백버튼을 누르면 이전 페이지를 다시 로드시키기

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

포트폴리오 더 보기 +

과정소개
커리큘럼
강사소개
포트폴리오
수강후기
추천과정

수강 후기 남깁니다.(김성근 강사님)김이*

처음 컴퓨터 활용 능력 2급을 공부하였는데 생각 한 거보다 재밌었고 학원 시설도 좋았습니다. 강의실도 쾌적하고 시설이 깔끔하였습니다. 그리고 김성근 강사님과 수업을 하였는데 지루하지 않게 설명 하시고 또 천천히 반복해서 얘기 해주셔서 놓치지 않고 잘 따라갔던 거 같습니다. 또 중간 중간 편하게 얘기해주실 때 말씀이 너무 재밌으셔서 좋은 시간이 되었습니다. 다음에 지인에게 이 학원을 추천해도 괜찮을 것 같습니다. 감사합니다.
수강후기윤경*

강사님이 설명을 잘해주셔서 이해하기 엄청 쉬웠어요.
조민규 강사님 수강 후기이하*

프리미어 프로는 이전에 독학으로 컷 편집 정도로만 사용했었고, 에프터이펙트의 경우에는 처음 다뤄보는 것이라서 걱정이 많았습니다. 걱정과 다르게 강사님께서 하나하나 꼼꼼히 짚어주시고, 사소한 질문에도 친절하게 알려주셔서 더 자신감 가지고 수업을 들을 수 있었습니다. 감사합니다.
감사합니다.고한*

컴활 1급에 대한 큰 틀을 알수 있게 되었고, 향후 부족한 부분은 수업내용과 필기 내용을 활용하여 합격하는데 큰 도움이 될 것 같습니다. 중간중간 어려운 부분도 많았지만 선생님이나 주변 동료를 통해서 수업을 듣고 이해하는데 크게 도움이 되었고 컴활1급 합격에 대한 전반적인 지식 및 기술을 습득할 수 있어서 좋았습니다. 자격증 획득에 대한 방향성을 알고 틀에 맞춰서 자격증을 획득에 대한 지식을 습득하기 용이하였습니다.
컴활 1급김현*

체계적인 커리큘럽을 통해 배울 수 있어 컴활 1급 필기와 실기 기본적인 이해와 자격증 취득 준비 과정에 많은 도움이 되었습니다. 감사합니다.
컴활2급 필기/실기 (임인규강사님) 수강후기안민*

매 수업 때마다 열정적으로 가르침 덕분에 자격증 취득에 한 걸음 가까워진 것 같습니다. 이해가 안 되는 부분이 있으면 최선을 다해 알려 주시고 잘 챙겨주신 덕분에 엑셀 공부에 도움이 많이 되었습니다. 1달 동안 너무 감사했습니다!