■ 학습목표

■ 본 훈련과정의 특징

■ 프로젝트 결과물

■ 필요 교육장비

■ 본 훈련과정의 난이도 및 훈련생 취업

프론트엔드 웹 개발자 

NCS 교과목명

학습목표

교과목 및 교육내용

시수

HTML & CSS 기본

HTML & CSS을 학습하여

인터프리터 언어를 이해하고

실무적 웹 디자인 사이트분석 및 CSS를 사용하여 웹사이트 제작을 할 수 있다.

HTML & CSS 기본

- 좋은 웹 디자인이란

- 다양한 종류의 사이트 분석

- 사용성

- 웹 사이트 기본 구조

- HTML 태그

- 블록 요소 vs 인라인 요소

- HTML을 장식하는 CSS

- CSS 선택자

- 문자, 색, 배경, 이미지, 여백, 테두리, 리스트 등 CSS 적용

- CSS 레이아웃

60H

HTML & CSS 응용

HTML5 문법

(HTML5 문법을 익히고

웹 페이지 구조를 이해할 수 있다)

웹 언어인 HTML, CSS, 응용.

- 풀스크린 웹 사이트

- 풀스크린 페이지 제작 흐름

- CSS 분할 및 합치기

- 화면을 꽉 채우는 배경

- 블랜드 모드

- 컬럼 레이아웃

- 메인 콘텐츠 영역 작성

- 반응형 웹 디자인

- 문자 크기, 여백 조정 

- 브레이크 포인트

- 타일 형태 레이아웃

- CSS 그리드

- 크기가 다른 요소의 배치

CSS 문법

(CSS 문법을 이해 한 후 웹 페이지에

스타일을 적용할 수 있다.)

- CSS란? 

- 스타일 사용 이유? 

- 스타일 적용, 주석, 

- CSS 선택자, 

- 선택자 사용법, 

- 선택자 우선순위, 

- 길이와 색상 적용

- 폰트 스타일, 텍스트 스타일, 구글 웹폰트 적용, 리스트 스타일, 테두리 스타일, 박스 모델

- 배경 스타일, 테이블 스타일, 레이아웃 관련 스타일(프롯 지정과 해제, 포지션 지정) 

- 웹 페이지 제작 실습으로 이해하는 CSS

화면 설계 및

구현

화면설계 및 UI 설계

(스트리 보드와 화면 설계서를

작성함으로써

화면 설계를 이해할 수 있다.)

-화면 UI 설계

- var 선언자 특성

- let 선언자

- const 선언자

- Symbol 타입

- 화살표 함수

- for of 문

- 디스트럭처링

- Map 컬렉션 타입

- Set 컬렉션 타입

- 함수 매개변수

- 템플릿 리터럴

- 클래스 구문, 클래스 상속

- 자바스크립트 객체

- 메서드 다형성 , 추상화

- 클래스 관계와 UML

- 객체 지향 설계 원칙

- 생성 패턴, 구조 패턴, 행위 패턴

- MVC 패턴

48H

화면 설계 및

구현

웹언어 활용

(웹 언어를 활용하여

개인 프로젝트의

웹 페이지를 제작할 수 있다.)

웹언어 활용

- MySQL 개요 및 개발환경 구축

- MySQL select 쿼리문

- 데이터베이스 및 테이블

- select 기본 

- 연산자 사용

- 조건절

- 논리 연산자

- like

- 정렬

- 숫자 함수, 문자열 함수, 날짜 함수 등

- 조인

- 서브쿼리

- MySQL 수정, 삭제, 관리

- 저장, 수정, 삭제

- 트랜젝션 관리

- 테이블 변경

- 제약조건

- 시퀸스 및 뷰

함수형 자바 스크립트 프로그래밍

- 함수형 프로그래밍

- 명령형, 선언형, 추상화

- 자바스크립트 함수

- 상태함수, 함수 인자

- 고차 함수 및 추상화

- 함수 저장, 전달, 반환

- 클로져

- 배열 및 연산 연결

- 커링 및 데이터 플로우

- 컴포지션

- 컨테이너

- 제너레이터

48H

프로그래밍 언어 활용

뷰제이에스(Vue.js) 이해와 활용

(뷰제이에스(Vue.js)의 기본 용어 습득과

뷰제이에스(Vue.js) 활용을 통해

Vue Router 를 이해할 수 있다.)

뷰제이에스(Vue.js)

- Vue.js 개요

- 데이터 바인딩

- 속성 바인딩

- 템플릿 조건 분기

- 리스트 데이터

- 이벤트 핸들링

- 디렉티브

- 컴포넌트

- 트랜지션 및 애니메이션

- Vue cli

- Vuex

- Vue Router

50H

자바스크립트 & 제이쿼리 실습 및 응용(웹개발)

자바스크립트 및 제이쿼리 실습 및 응용 패턴을 이해하고 활용하여 웹 

사이트를 제작할 수 있다.)

프론트엔드 프로젝트

- 프로젝트 주제 정하기

- 프로젝트 설계하기

- 프로젝트 준비하기

- 헤더 만들기

- 메인 만들기

- 여행지 목록 가져오기

- 상세 페이지 설계하기

- 여행지 상세 정보 가져오기

- 이미지 갤러리 추가하기

- 지도 추가하기

- 여행지 등록 기능 구현하기

- 마이 페이지 만들기

- 마이 페이지의 목록 구현하기

- 최종 완성하기

70H

재량교과

취업특강 및 프로젝트 발표

4H

합 계

280H