프론트엔드 개발자를 위한 HTML5와 jQuery

재직자

다른 훈련 과정 보기

닫기

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

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

닫기

분야

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

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

프론트엔드 개발자를 위한 HTML5와 Jquery

진화를 멈추지 않는 웹 환경에서 웹 서비스 전반에 걸쳐 요구되는 다양한 환경에의 대응, 더욱 깊고 풍부한 서비스의 필요에
발맞추어, 보다 효율적이고 효과적인 작업방식의 습득을 통해 기존 기술과 최신 기술의 상생적인 융합을 모색한다.

접근성의 향상과 안정적인 시스템, 다양한 요구에의 대응을 만족하면서 아울러 비용의 절감까지 도모할 수 있는 차세대 웹 기술들을 기반으로 기업의 서비스 및 상품가치를 극대화 하여 이윤창출에 기여할 수 있는 웹서비스가 될 수 있도록 개발 및 관리자의 역량을 극대화 한다.

웹디자이너와 웹퍼블리셔(코더), 웹 개발자로 분화된 기존의 업무분담체계에서 대응하기 힘든 웹 기술의 변화를 담당하기위해 요구되는 차세대 직업군인 프론트엔드 개발자로의 이직 혹은 취업을 희망하는 이들을 위한 체계적인 기술습득을 지원한다.

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

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

프론트엔드 개발자를 위한 html5와 jquery
강의일차	프론트엔드 개발자를 위한 html5와 jquery
1일차	* 최신 웹트렌드와 강의를 통해서 만들어볼 예제 살펴보기 * 작업환경 셋팅하기 ○ 예제) 1단 메뉴를 만들어 보자 - 마크업 구조 살펴보기 - 마우스 롤오버, 아웃 만들기 ○ 예제) 탭메뉴 만들기 - 마크업 구조 살펴보기 - 클릭시 활성화 구현하기
2일차	○ 예제) 자동으로 롤링되는 배너 만들기 - 마크업 구조 살펴보기 - 자바스크립트 setinerval 함수에 대해 알아보기 - 애니메이션을 줘서 자동으로 슬라이드 시키기 ○ 예제) 애니메이션되는 1단 메뉴를 만들어 보자 - 마크업 구조 살펴보기 - 마우스 롤오버, 아웃 만들기 - 애니메이션을 사용해 아래로 열리는 메뉴 만들기
3일차	○ 예제) 동적으로 html문서를 읽어와 활용하기 - ajax로 html문서를 읽어오자 - 동적으로 불러온 html문서를 화면에 붙여 주고 css를 적용시켜 보기 ○ 예제) 날씨를 알려주는 페이지를 만들자 - ajax로 날씨 데이터를 읽어오자 - xml데이터를 파싱해서 폼에 맞게 넣기
4일차	* jquery-ui draggable, droppable * draggable 에서 제공하는 메서드와 옵션 알아보기 ○ 예제) 드래그하여 완성하는 퍼즐게임 만들기 - 마크업 구조 살펴보기 - 퍼즐조각을 드래그하여 맞추도록 개발해보자 * slider 에서 제공하는 메서드와 옵션 알아보기
5일차	* jquery-ui slider, sortable * slider 에서 제공하는 메서드와 옵션 알아보기 * sortable 에서 제공하는 메서드와 옵션 알아보기 ○ 예제) 360도 vr만들기 - 마크업 구조 살펴보기 - 슬라이더를 움직이면 vr이 돌아가도록 개발 ○ 예제) 윈도우 탐색기와 같은 ui만들기 - 마크업 구조 살펴보기 - 파일을 sorting하여 정렬시켜 주기 폴더에 드래그하면 폴더 안으로 이동시키기
6일차	* jquery jplayer * jplayer 에서 제공하는 메서드와 옵션 알아보기 ○ 예제) 크로스 브라우징을 지원하는 비디오 플레이어 만들기 - ie에서 flash player를 이용하여 비디오 되도록 설정 - html5의 video태그를 지원하는 브라우저에서는 html5를 이용하여 비디오 플레이 시키기
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 미디어쿼리를 활용하여 반응형 웹사이트 만들기 - 동적으로 페이지를 불러오고 애니메이션을 적용시켜 주기 - 브라우저의 백버튼을 누르면 이전 페이지를 다시 로드시키기

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

정현진 강사

강경모 강사

조*솜디지털컨버전스 양성과정
변수*스마트기기 UXUI 디자인(디지털 앱, 웹퍼블리셔)
김영*[NCS]인터렉티브웹디자인(별관)
황윤*[NCS]인터렉티브웹디자인(별관)

포트폴리오 더 보기 +

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

김철학 선생님 박소현 실장님 고생하셨습니다이찬*

적절한 내용으로 비전공자로써 이해할수있었고 박소현 실장님의 상담덕에 자신감이 생겼습니다 감사합니다
김철학 선생님, 박소현 취업 상담 실장님 !!!!!!!!!홍유*

선생님~~ 5개월간 9시부터 6시까지 수업 하시느라 고생 많으셨습니다. 비전공자여서 초반에는 엉뚱한 질문도 많이 했지만 이해될때까지 알려주셔서 감사했어요. 그리고 박소현 상담 실장님, 자소서 작성부터 면접까지 엄청 많은 도움주셔서 감사합니다. 처음 도전하는 분야이기 때문에, 혼자 준비한다면 너무 막막했을텐데 실장님께 너무 많은 도움 받았습니다!!! 취업을 간절히 원한다면 박소현 실장님께 적극적으로 질문하고 도움을 요청한다면 좋을 거 같습니다. 다들 취뽀~ 아자!
김철학 선생님, 박소현 실장님 감사합니다!오수*

전공자로서 웹 개발에 대한 기본적인 이해는 있었지만, 이번 교육을 통해 AI Worker, AI UX 전략, RAG 인프라와 같은 새로운 기술을 접하며 시야를 넓힐 수 있었습니다. 특히 Java와 Spring 기반의 웹 서비스에 AI 기술을 어떻게 자연스럽게 연결할 수 있는지 직접 배우고 경험한 점이 인상 깊었습니다. 단순히 기능을 구현하는 것을 넘어 사용자의 경험과 서비스의 방향까지 함께 고민할 수 있었고, 앞으로 AI를 활용한 웹 서비스를 개발하는 데 좋은 밑바탕이 될 것 같습니다. 새로운 기술을 배우며 한 단계 더 성장할 수 있었던 의미 있는 시간이었습니다.
컴활 1급 필기실기(김경미쌤) 수강후기문소*

혼자 집에서 독학했으면 한 달안에 이정도의 양을 소화하지 못했을 것 같은데, 한 번 다 돌아볼 수 있어서 좋았습니다!! 아무래도 내용이 많다보니 뒤로 가면서 앞 부분을 까먹게되는데 사소한 부분도 하나하나 다시 설명해주셔서 복습하는 데 편했어요. 그리고 질문도 꽤 많이 드렸는데ㅜ 엄청 빠르게 답장주셨어요. 추천드립니당
26.02 - 26.07 수강 후기배은*

관심은 있는데 혼자 공부하긴 어려웠던 툴을 기초부터 심화 과정까지 배울 수 있어서 좋았습니다. 짧으면 짧고 길면 긴 기간 동안 개인 프로젝트도 하고 협업 프로젝트도 하면서 실무 경험을 할 수 있다는 점이 좋았던 것 같습니다! 5개월 과정 동안 수고하셨습니다 ????
하경미 강사님, 정은주 강사님 그동안 고생하셨습니다. 이상*

만나 뵈어서 행운이었습니다. 덕분에 많은 것을 배우고 갑니다. 감사합니다!