SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Downloaden Sie, um offline zu lesen
과정 커리큘럼(웹 개발자)
과정체계도
(웹퍼블리셔)
과정체계도
(웹 개발자)
커리큘럼
과정명 세부내용 배정시간
HTML&CSS
1. 선수학습 : 컴퓨터 기초
2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등)
3. 학습내용
- 웹페이지 제작을 위한 하드코딩 방법 학습 (HTML, CSS)
30
웹표준 및
웹접근성
1. 선수학습 : HTML&CSS
2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등)
3. 학습내용
- 웹표준 및 웹접근성에 대한 학습 (XHTML)
30
웹표준&CSS3
(주말과정)
1. 선수학습 : 컴퓨터 기초
2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등)
3. 학습내용
- HTML, CSS, 웹표준, 웹접근성
(주-56)
HTML5 & jQuery
1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성
2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등)
3. 학습내용
- HTML5, javaScript, jQuery
60
프론트엔드개발자
1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성, HTML5&jQuery
2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등)
3. 학습내용
- 선수학습된 과정을 기반으로 프론트엔드 개발 실무
60
워드프레스&PHP
1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성, HTML5&jQuery
2. 소프트웨어 : 워드프레스
3. 학습내용
- 웹 페이지 제작 실무
48
PHP&MySQL
1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성, HTML5&jQuery
2. 소프트웨어 : 텍스트 에디터, APMSetup(Apache,PHP,MySQL)
3. 학습내용
- 서버 사이드 웹 페이지 제작 실무
60
(주-56)
과정별 세부 커리큘럼
과 정 명 HTML&CSS
과정목표 - HTML&CSS를 이용한 웹페이지(하드코딩)를 제작할 수 있다.
선수과목 컴퓨터 기초
세부커리큘럼 (30시간)
단원명 세부내용 시간 결과물
HTML 기본
- HTML문서의 개념
- HTML의 구조 파악하기
- 사이트설정을 통해 로컬사이트와 웹사이트 개념 학습
- 미리보기기능을 통하여 여러 브라우저 설치
- 좋은 디자인과 나쁜 디자인의 비교
- 텍스트 관련 태그를 이용한 문단 정리
- 디자인모드에서의 문단 정리, 목록과 관련된 태그의 활용
- 이미지 태그를 사용하여 이미지 링크하기
6
하이퍼링크 및 테
이블
- 앵커태그를 이용한 text링크와 image링크
- 디자인모드에서 텍스트링크와 이미지링크 걸기
- 이미지 맵의 사용방법과 활용법, 롤오버이미지 만들기
- 네임앵커의 사용법과 활용법
- insert메뉴를 이용해 테이블 제작
- 속성패널에서 테이블 편집하기
- 테이블을 이용해 웹사이트 레이아웃 만들기
6
스타일 시트
- 프레임으로 웹사이트 다단나누기
- 하이퍼링크의 target속성으로 frame설정하기
- iframe의 이해, iframe으로 멀티미디어 삽입하기
- CSS(Cascading Style Sheet)의 이해
- 태그 및 문서 내부에서 정의하는 style로 문서꾸미기
- 태그선택자, 아이디선택자, 클래스 선택자의 이해
- Form문서의 이해, 여러 가지 문서 입력 양식만들기
6
프로토타입 제작
기본
- apDiv의 이해, apDiv로 자유롭게 레이아웃을 구성하기
- Form문서의 이해, 여러 가지 문서 입력 양식만들기
- 폼문서 만들기
6
프로토타입 제작
활용 및 사용성테
스트
- apDiv 팝업 만들기, 문서에서 div팝업 이동하기
- 브라우저팝업 만들기, 롤오버 메뉴바 만들기
- 무료호스팅에서 웹계정 만들기
- FTP프로그램의 사용방법과 활용
- 무료게시판 설치 하고 연결하기
6 ㅇ 웹 페이지 제작
과정별 세부 커리큘럼
과 정 명 웹 표준 & 웹 접근성
과정목표
- 웹 표준과 웹 접근성을 준수하여 웹페이지를 제작 하며, 제작되어진 웹
페이지를 웹 표준, 웹 접근성을 감수하는 능력을 학습한다.
선수과목 HTML&CSS
세부커리큘럼 (30시간)
단원명 세부내용 시간 결과물
HTML 기본
- H.T.M.L의 기본 개념과 Markup언어의 개념
- html문서의 구조와 이해, htm언어의 문법과 DT설정
- meta태그의 이해, html주요 Element와 Attribute
- block요소와 inline요소의 차이(div요소와 span요소의 비교)
- 가시속성에 관한 개념과 다양한 속성을 통한 가시속성 적용
6
CSS의 개념이해
- 문서를 구조화하는 html의 주요 요소
- 문서구조화에서 태그의 의미적 요소의 중요성
- 의미적 마크업과 HTML5의 신규추가 태그
- CSS의 개념이해
- CSS선택자의 종류(기본 선택자, 응용선택자)
- 인라인 정의 방식(내부, 외부)
- style속성의 분류
6
웹표준 및 웹접근성
실무활용
- BoxModel의 개념
- position의 각 속성에 따른 위치
- position의 absolute와 relative관계
- float와 clear의 속성 활용법
- 장애인 차별 금지법과 웹접근성
- 웹접근성 연구소에 따른 표준마크업과 WA마크
- 웹접근성 22개 테스트 항목
- background-image속성에서 중첩 이미지의 사용
- background-repeat, background-size
- background-position등을 활용한 배경처리
- 이미지 좌표를 이용한 롤오버 효과(image IR)
- 여러 가지 코딩에디터의 소개와 효율적인 코딩
- zen-coding의 사용법과 단축키 안내, 설정방법
12
웹표준 및 웹접근성
적용 및 테스트
- IE(Internet Explorer)구버전에 대한 대응방안
- 멀티브라우저환경에서의 사이트 테스트하기
- 웹표준과 웹접근성을 활용한 인덱스문서 작성하기
6
ㅇ 웹표준 및 웹접근성을
준수한 웹페이지
과정별 세부 커리큘럼
과 정 명 HTML&jQuery
과정목표
- HTML5 및 JQUERY기술 등 최신 웹 기술을 반영하여 웹표준 및 시맨
틱한 웹페이지 및 콘텐츠를 제작할 수 있다.
- HTML5, CSS3, JQUERY를 활용하여 스마트디바이스 플랫폼에서 구동
될 수 있는 웹 콘덴츠 제작 기술을 학습한다.
선수과목 HTML&CSS, 웹 표준&웹 접근성
세부커리큘럼 (30시간)
단원명 세부내용 시간 결과물
HTML5 & CSS3
- html4와 xhtml, html5의 버전 별 차이 및 DTD 이해
- 의미적마크업(Semantic Markup)/문서구조(document structure)
- 구조를 나타내는 요소, 콘텐츠 모델(Content Models)
- 아웃라인 알고리즘(Outline Algorithm)
- 박스 모델(Box Model) 및 콘텐츠 모델 (Content Model)
- 인터렉션 요소/html5 새로운 웹폼 관련 요소
- 동영상 및 오디오/vendor-prefix 이해 및 css3 활용
- CSS3 Transition 을 이용한 앱과 같은 화면 전환 효과
- 변형(Transform), perspective를 이용한 3D 큐브 제작
- 비트맵이미지(canvas) 및 API, 벡터이미지(svg) 및 API
- 지오로케이션및MAP API (google map API, naver map API)
18
javaScript &
jQuery
- javascript의 개요 및 문법(introduction & syntax)
- 객체의 이해 및 활용/이벤트 발생,전달, 제거
- javascript 라이브러리와 기본 선택자
- jQuery 이벤트 / 시각적 효과와 애니메이션
- jQuery 함수 및 $()의 의미, 래퍼(wrapper),
- 선택자(selector)와 메소드(method), 메소드체인(chain)
- 엘리먼트 제어(manipulation)
- 애니메이트(animate) 메소드, json 오브젝트 다루기
- 다양한 애니메이션 방법, callback 다루기
- easing 함수 다루기
- 이벤트 제어하기 / 이벤트 트리거 (trigger)
- 네비게이션 다루기 (navigation)
- 아코디언 메뉴 제작
- jQuery 플러그인과 활용
- 라이트박스(lightbox)를 활용한 갤러리
- jQuery 모바일
30
반응형/모바일
웹페이지 제작
- 미디어 쿼리(Media Query)
- Media Query의 변화와 특징 (N-screen 대응)
- CSS3를 지원하지 않는 브라우저(IE)에서의 CSS3 적용
- 반응형 웹페이지 (Responsive Web Design)
- 미디어 쿼리 분기점의 이해 (Break Points)
- 클라이언트에 데이터를 저장
- 로컬저장소(Local Storage) vs 세션저장소(Session Storage)
- 모바일 웹의 이해, meta viewport 이해 및 적용하기
- Screen Density, CSS Pixels / Device Pixels
- 레티나 디스플레이 대응 방법, 모바일 페이지 제작
12
ㅇ 반응형 웹페이지
ㅇ 모바일 웹페이지
과정별 세부 커리큘럼
과 정 명 프론트엔드개발자
과정목표
- HTML5 및 jQuery기술 등 최신 웹 기술을 교육훈련에 반영하여 웹표
준 및 시맨틱한 웹페이지 및 콘텐츠를 제작할 수 있다.
- HTML5, CSS3, jQuery, Ajax등을 활용한 스마트 디바이스 플랫폼에서
구동 될 수 있는 웹콘덴츠 제작 기술 습득 할 수 있다.
선수과목 HTML&CSS, 웹 표준&웹 접근성, HTML&jQuery
세부커리큘럼 (30시간)
단원명 세부내용 시간 결과물
프론트엔드 개발자
실무 활용 - I
ㅇ 최신 웹트렌드와 강의를 통해서 만들어볼 예제 살펴보기
ㅇ 작업환경 셋팅하기
ㅇ 자동으로 롤링되는 배너 만들기
ㅇ 애니메이션 만들기
ㅇ 동적으로 HTML문서를 읽어와 활용하기
- AJAX로 HTML문서를 읽어오기
ㅇ jQuery-UI Draggable, Droppable
- Draggable/Droppable 에서 제공하는 메서드와 옵션
ㅇ jQuery-UI Slider, Sortable
- Slider/Sortable 에서 제공하는 메서드와 옵션
ㅇ jQuery jPlayer jPlayer 에서제공하는메서드와옵션알아보기
- 크로스 브라우징을 지원하는 비디오 플레이어 만들기
- HTML5를 이용하여 비디오 플레이 시키기
ㅇ 이미지 갤러리 스크롤 메뉴 만들기
- Thumbnail 슬라이드 구현 및 이미지 활성화
ㅇ 2뎁스 메뉴 만들기
- 1뎁스 오버시 2뎁스 나오게 구현
- 2뎁스 메뉴 구현
- 링크주소를 읽어 해당 메뉴 활성화하기
ㅇ parallax scrolling 사이트 만들기
- i-OS와 같은 pull-to-refresh 메뉴 만들기
39 ㅇ 웹 페이지 제작
프론트엔드 개발자
실무 활용 - II
ㅇ 반응형웹
- PC와 모바일에서 다르게 동작하는 반응형 웹사이트 만들기
ㅇ CSS3 미디어쿼리
- CSS3 미디어쿼리를 적용하여 반응형웹 만들기
ㅇ i-Scroll라이브러리를 활용한 모바일 Flikking 만들기
- 모바일 환경에서는 i-Scroll을 적용하여 모바일 환경에
맞도록 변경해 주기
ㅇ CSS3 Animation 효과
- CSS3 2D transform, 3D transform, transition활용
ㅇ jQuery에서는 지원하지 않는 애니메이션 만들어 보기
- 3D CUBE만들어 보기
ㅇ 반응형 웹사이트 포트폴리오 만들기
- JavaScript Hash Event살펴보기
- CSS3 미디어쿼리를 활용하여 반응형 웹사이트 만들기
- 동적으로 페이지를 불러오고 애니메이션을 적용시켜 주기
- 브라우저의 백버튼을 누르면 이전 페이지를 다시 로드시키기
21
ㅇ 반응형 웹페이지
제작
과정별 세부 커리큘럼
과 정 명 워드프레스 & PHP
과정목표
- 워드프레스(wordpress)라는 CMS를 이용하여 단기간에 최고의 효과를
낼 수 있는 사이트 제작을 통하여 웹 전반에 대한 기술과 개념을 확립
하고 실무에 적용한다.
선수과목 HTML&CSS, 웹 표준&웹 접근성, HTML&jQuery
세부커리큘럼 (48시간)
단원명 세부내용 시간 결과물
워드프레스 활용
- 워드프레스를 이해 /활용
- 웹환경의 변화
- 웹환경과 워드프레스
- 가입형 워드프레스 가입
- MySQL 기초 데이터 베이스 만들기
- 설치형 워드프레스 설치
- 설정하기
- 테마 선택하기
- 사이트 제작 실무
- 컨텐츠 제작
- 호스팅형 워드프레스 설치
- 워드프레스 설정
- 사이트 구조/메뉴 만들기
- 웹사이트 꾸미기
- 한국형 게시판 사용하기
- 테마 최적화
- 워드프레스 최적화
- 기능 추가 플러그인
- 테마 변형하기
- 헤더페이지 수정
- 풋터 페이지 수정
- 구조 변경하기
30
PHP 활용
- PHP 간단한 소개
- 웹과 웹 프로그래밍의 이해
- PHP 기본 문법
- 변수/연산자
- PHP 조건 처리 및 조건분기
- PHP 배열 및 처리
- MYSQL 쿼리
- 데이터 베이스 작성
- PHP 와 데이터 베이스연동
18 ㅇ 웹 페이지 제작
과정별 세부 커리큘럼
과 정 명 워드프레스 & PHP
과정목표
- 기능성 홈페이지 구현을 위해 많이 사용되는 PHP와 MySQL에 대한 이
해 및 구현 방법을 습득하고 중․소형 서버에서 주로 사용되는 웹 어플
리케이션 구현 기술을 습득하여 회원가입 및 게시판 등 관리페이지 제
작 등의 업무를 수행할 수 있다.
선수과목 HTML&CSS, 웹 표준&웹 접근성, HTML&jQuery
세부커리큘럼 (48시간)
단원명 세부내용 시간 결과물
PHP & MySQL
- PHP 간단한 소개
- 웹과 웹 프로그래밍의 이해
- PHP 기본 문법
- 변수/연산자
- PHP 조건 처리 및 조건분기
- PHP 배열 및 처리
- 데이터베이스의 이해
- MYSQL 쿼리
- 데이터 베이스 작성
- PHP 와 데이터 베이스연동
- 게시판 페이지
- 게시판 입력 및 모듈화/게시판 수정 및 모듈화
- 게시판 삭제 / 검색 / 페이징 모듈
- 게시판 테이블 연결
- 세션/쿠키
- 로그인 시스템
- 게시판 작성 연습
33
PHP & MySQL
실무적용
- 실전 PHP 개발
- 베이스 모듈 개발
- 데이터 베이스 연동
- 수정입력삭제업데이트 모듈화
- 권한 관리모듈
- MVC 모델화
- 블로그 관리페이지
- 블로그 연동 및 연습
- 상품 관리 페이지
- 상품 카테고리
- 상품 판매 페이지
- 장바구니 시스템
- 집계 데이터 가공및 처리
- 프레임웍(CodeIgniter,Cake PHP)/CMS 소개
- 호스팅 환경의 이해
- 서버 호스팅을 포트폴리오 이전
- 포트폴리오 완성
27 ㅇ 개인 포트폴리오

Weitere ähnliche Inhalte

Was ist angesagt?

Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerChang W. Doh
 
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2민태 김
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기Suan Lee
 
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음DataUs
 
교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서
교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서
교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서Jeong Seak Jeong
 
Bootstrap 살펴보기
Bootstrap 살펴보기Bootstrap 살펴보기
Bootstrap 살펴보기영배 현
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서draghome
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차Michael Yang
 
Word camp seoul-2012-track2-2
Word camp seoul-2012-track2-2Word camp seoul-2012-track2-2
Word camp seoul-2012-track2-2082net
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차Michael Yang
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설Toby Yun
 
Javascript and Web Performance
Javascript and Web PerformanceJavascript and Web Performance
Javascript and Web PerformanceJonathan Jeon
 
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer ModelHan Lee
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차Michael Yang
 
프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css dom프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css domYoung-Beom Rhee
 
웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?Joone Hur
 
How2 demo
How2 demoHow2 demo
How2 demoleesb
 

Was ist angesagt? (20)

웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
Polymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymerPolymer Codelab: Before diving into polymer
Polymer Codelab: Before diving into polymer
 
비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2비개발자를 위한 Javascript 알아가기 #2
비개발자를 위한 Javascript 알아가기 #2
 
HTML5 & CSS 살펴보기
HTML5 & CSS  살펴보기HTML5 & CSS  살펴보기
HTML5 & CSS 살펴보기
 
Basic html
Basic htmlBasic html
Basic html
 
프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음프론트엔드 개발 첫걸음
프론트엔드 개발 첫걸음
 
교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서
교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서
교육을 바꾸는 사람들 웹사이트 리뉴얼 제안서
 
Bootstrap 살펴보기
Bootstrap 살펴보기Bootstrap 살펴보기
Bootstrap 살펴보기
 
드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서드래그홈2010홈페이지제안서
드래그홈2010홈페이지제안서
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차
 
Word camp seoul-2012-track2-2
Word camp seoul-2012-track2-2Word camp seoul-2012-track2-2
Word camp seoul-2012-track2-2
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
 
2-2. html5
2-2. html52-2. html5
2-2. html5
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설
 
Javascript and Web Performance
Javascript and Web PerformanceJavascript and Web Performance
Javascript and Web Performance
 
프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model프론트엔드 개발자를 위한 Layer Model
프론트엔드 개발자를 위한 Layer Model
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차
 
프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css dom프론트엔드스터디 E02 css dom
프론트엔드스터디 E02 css dom
 
웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?웹브라우저는 어떻게 동작하나?
웹브라우저는 어떻게 동작하나?
 
How2 demo
How2 demoHow2 demo
How2 demo
 

Ähnlich wie 과정 커리큘럼

웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)JoonHee Lee
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)Channy Yun
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개Toby Yun
 
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5Channy Yun
 
Developer`s Web Standard
Developer`s Web StandardDeveloper`s Web Standard
Developer`s Web StandardSangHoon Han
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)SangIn Choung
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.효근 박
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오Haegyun Jung
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현kdh24
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdfSangHoon Han
 
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 웹표준을 기반한 크로스 브라우징 표준화 (2005) 웹표준을 기반한 크로스 브라우징 표준화 (2005)
웹표준을 기반한 크로스 브라우징 표준화 (2005)Channy Yun
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드Jong-hyun Park
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용중선 곽
 
제품소개서 (Pastel editor)
제품소개서 (Pastel editor)제품소개서 (Pastel editor)
제품소개서 (Pastel editor)Kevin Hyun
 
제품소개서( Pastel Editor)
제품소개서( Pastel Editor)제품소개서( Pastel Editor)
제품소개서( Pastel Editor)Kevin Hyun
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER Engineering
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Wonkyung Lyu
 

Ähnlich wie 과정 커리큘럼 (20)

웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
 
웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)웹 표준의 미래- HTML5 (2006)
웹 표준의 미래- HTML5 (2006)
 
HTML5 스펙 소개
HTML5 스펙 소개HTML5 스펙 소개
HTML5 스펙 소개
 
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5
 
Developer`s Web Standard
Developer`s Web StandardDeveloper`s Web Standard
Developer`s Web Standard
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Portfolio
PortfolioPortfolio
Portfolio
 
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!.pdf
 
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 웹표준을 기반한 크로스 브라우징 표준화 (2005) 웹표준을 기반한 크로스 브라우징 표준화 (2005)
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
 
제품소개서 (Pastel editor)
제품소개서 (Pastel editor)제품소개서 (Pastel editor)
제품소개서 (Pastel editor)
 
제품소개서( Pastel Editor)
제품소개서( Pastel Editor)제품소개서( Pastel Editor)
제품소개서( Pastel Editor)
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles
 

과정 커리큘럼

  • 1. 과정 커리큘럼(웹 개발자) 과정체계도 (웹퍼블리셔) 과정체계도 (웹 개발자) 커리큘럼 과정명 세부내용 배정시간 HTML&CSS 1. 선수학습 : 컴퓨터 기초 2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등) 3. 학습내용 - 웹페이지 제작을 위한 하드코딩 방법 학습 (HTML, CSS) 30 웹표준 및 웹접근성 1. 선수학습 : HTML&CSS 2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등) 3. 학습내용 - 웹표준 및 웹접근성에 대한 학습 (XHTML) 30 웹표준&CSS3 (주말과정) 1. 선수학습 : 컴퓨터 기초 2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등) 3. 학습내용 - HTML, CSS, 웹표준, 웹접근성 (주-56) HTML5 & jQuery 1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성 2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등) 3. 학습내용 - HTML5, javaScript, jQuery 60 프론트엔드개발자 1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성, HTML5&jQuery 2. 소프트웨어 : 텍스트 에디터(Notepad, Editplus 등) 3. 학습내용 - 선수학습된 과정을 기반으로 프론트엔드 개발 실무 60 워드프레스&PHP 1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성, HTML5&jQuery 2. 소프트웨어 : 워드프레스 3. 학습내용 - 웹 페이지 제작 실무 48 PHP&MySQL 1. 선수학습 : HTML&CSS, 웹표준 및 웹접근성, HTML5&jQuery 2. 소프트웨어 : 텍스트 에디터, APMSetup(Apache,PHP,MySQL) 3. 학습내용 - 서버 사이드 웹 페이지 제작 실무 60 (주-56)
  • 2. 과정별 세부 커리큘럼 과 정 명 HTML&CSS 과정목표 - HTML&CSS를 이용한 웹페이지(하드코딩)를 제작할 수 있다. 선수과목 컴퓨터 기초 세부커리큘럼 (30시간) 단원명 세부내용 시간 결과물 HTML 기본 - HTML문서의 개념 - HTML의 구조 파악하기 - 사이트설정을 통해 로컬사이트와 웹사이트 개념 학습 - 미리보기기능을 통하여 여러 브라우저 설치 - 좋은 디자인과 나쁜 디자인의 비교 - 텍스트 관련 태그를 이용한 문단 정리 - 디자인모드에서의 문단 정리, 목록과 관련된 태그의 활용 - 이미지 태그를 사용하여 이미지 링크하기 6 하이퍼링크 및 테 이블 - 앵커태그를 이용한 text링크와 image링크 - 디자인모드에서 텍스트링크와 이미지링크 걸기 - 이미지 맵의 사용방법과 활용법, 롤오버이미지 만들기 - 네임앵커의 사용법과 활용법 - insert메뉴를 이용해 테이블 제작 - 속성패널에서 테이블 편집하기 - 테이블을 이용해 웹사이트 레이아웃 만들기 6 스타일 시트 - 프레임으로 웹사이트 다단나누기 - 하이퍼링크의 target속성으로 frame설정하기 - iframe의 이해, iframe으로 멀티미디어 삽입하기 - CSS(Cascading Style Sheet)의 이해 - 태그 및 문서 내부에서 정의하는 style로 문서꾸미기 - 태그선택자, 아이디선택자, 클래스 선택자의 이해 - Form문서의 이해, 여러 가지 문서 입력 양식만들기 6 프로토타입 제작 기본 - apDiv의 이해, apDiv로 자유롭게 레이아웃을 구성하기 - Form문서의 이해, 여러 가지 문서 입력 양식만들기 - 폼문서 만들기 6 프로토타입 제작 활용 및 사용성테 스트 - apDiv 팝업 만들기, 문서에서 div팝업 이동하기 - 브라우저팝업 만들기, 롤오버 메뉴바 만들기 - 무료호스팅에서 웹계정 만들기 - FTP프로그램의 사용방법과 활용 - 무료게시판 설치 하고 연결하기 6 ㅇ 웹 페이지 제작
  • 3. 과정별 세부 커리큘럼 과 정 명 웹 표준 & 웹 접근성 과정목표 - 웹 표준과 웹 접근성을 준수하여 웹페이지를 제작 하며, 제작되어진 웹 페이지를 웹 표준, 웹 접근성을 감수하는 능력을 학습한다. 선수과목 HTML&CSS 세부커리큘럼 (30시간) 단원명 세부내용 시간 결과물 HTML 기본 - H.T.M.L의 기본 개념과 Markup언어의 개념 - html문서의 구조와 이해, htm언어의 문법과 DT설정 - meta태그의 이해, html주요 Element와 Attribute - block요소와 inline요소의 차이(div요소와 span요소의 비교) - 가시속성에 관한 개념과 다양한 속성을 통한 가시속성 적용 6 CSS의 개념이해 - 문서를 구조화하는 html의 주요 요소 - 문서구조화에서 태그의 의미적 요소의 중요성 - 의미적 마크업과 HTML5의 신규추가 태그 - CSS의 개념이해 - CSS선택자의 종류(기본 선택자, 응용선택자) - 인라인 정의 방식(내부, 외부) - style속성의 분류 6 웹표준 및 웹접근성 실무활용 - BoxModel의 개념 - position의 각 속성에 따른 위치 - position의 absolute와 relative관계 - float와 clear의 속성 활용법 - 장애인 차별 금지법과 웹접근성 - 웹접근성 연구소에 따른 표준마크업과 WA마크 - 웹접근성 22개 테스트 항목 - background-image속성에서 중첩 이미지의 사용 - background-repeat, background-size - background-position등을 활용한 배경처리 - 이미지 좌표를 이용한 롤오버 효과(image IR) - 여러 가지 코딩에디터의 소개와 효율적인 코딩 - zen-coding의 사용법과 단축키 안내, 설정방법 12 웹표준 및 웹접근성 적용 및 테스트 - IE(Internet Explorer)구버전에 대한 대응방안 - 멀티브라우저환경에서의 사이트 테스트하기 - 웹표준과 웹접근성을 활용한 인덱스문서 작성하기 6 ㅇ 웹표준 및 웹접근성을 준수한 웹페이지
  • 4. 과정별 세부 커리큘럼 과 정 명 HTML&jQuery 과정목표 - HTML5 및 JQUERY기술 등 최신 웹 기술을 반영하여 웹표준 및 시맨 틱한 웹페이지 및 콘텐츠를 제작할 수 있다. - HTML5, CSS3, JQUERY를 활용하여 스마트디바이스 플랫폼에서 구동 될 수 있는 웹 콘덴츠 제작 기술을 학습한다. 선수과목 HTML&CSS, 웹 표준&웹 접근성 세부커리큘럼 (30시간) 단원명 세부내용 시간 결과물 HTML5 & CSS3 - html4와 xhtml, html5의 버전 별 차이 및 DTD 이해 - 의미적마크업(Semantic Markup)/문서구조(document structure) - 구조를 나타내는 요소, 콘텐츠 모델(Content Models) - 아웃라인 알고리즘(Outline Algorithm) - 박스 모델(Box Model) 및 콘텐츠 모델 (Content Model) - 인터렉션 요소/html5 새로운 웹폼 관련 요소 - 동영상 및 오디오/vendor-prefix 이해 및 css3 활용 - CSS3 Transition 을 이용한 앱과 같은 화면 전환 효과 - 변형(Transform), perspective를 이용한 3D 큐브 제작 - 비트맵이미지(canvas) 및 API, 벡터이미지(svg) 및 API - 지오로케이션및MAP API (google map API, naver map API) 18 javaScript & jQuery - javascript의 개요 및 문법(introduction & syntax) - 객체의 이해 및 활용/이벤트 발생,전달, 제거 - javascript 라이브러리와 기본 선택자 - jQuery 이벤트 / 시각적 효과와 애니메이션 - jQuery 함수 및 $()의 의미, 래퍼(wrapper), - 선택자(selector)와 메소드(method), 메소드체인(chain) - 엘리먼트 제어(manipulation) - 애니메이트(animate) 메소드, json 오브젝트 다루기 - 다양한 애니메이션 방법, callback 다루기 - easing 함수 다루기 - 이벤트 제어하기 / 이벤트 트리거 (trigger) - 네비게이션 다루기 (navigation) - 아코디언 메뉴 제작 - jQuery 플러그인과 활용 - 라이트박스(lightbox)를 활용한 갤러리 - jQuery 모바일 30 반응형/모바일 웹페이지 제작 - 미디어 쿼리(Media Query) - Media Query의 변화와 특징 (N-screen 대응) - CSS3를 지원하지 않는 브라우저(IE)에서의 CSS3 적용 - 반응형 웹페이지 (Responsive Web Design) - 미디어 쿼리 분기점의 이해 (Break Points) - 클라이언트에 데이터를 저장 - 로컬저장소(Local Storage) vs 세션저장소(Session Storage) - 모바일 웹의 이해, meta viewport 이해 및 적용하기 - Screen Density, CSS Pixels / Device Pixels - 레티나 디스플레이 대응 방법, 모바일 페이지 제작 12 ㅇ 반응형 웹페이지 ㅇ 모바일 웹페이지
  • 5. 과정별 세부 커리큘럼 과 정 명 프론트엔드개발자 과정목표 - HTML5 및 jQuery기술 등 최신 웹 기술을 교육훈련에 반영하여 웹표 준 및 시맨틱한 웹페이지 및 콘텐츠를 제작할 수 있다. - HTML5, CSS3, jQuery, Ajax등을 활용한 스마트 디바이스 플랫폼에서 구동 될 수 있는 웹콘덴츠 제작 기술 습득 할 수 있다. 선수과목 HTML&CSS, 웹 표준&웹 접근성, HTML&jQuery 세부커리큘럼 (30시간) 단원명 세부내용 시간 결과물 프론트엔드 개발자 실무 활용 - I ㅇ 최신 웹트렌드와 강의를 통해서 만들어볼 예제 살펴보기 ㅇ 작업환경 셋팅하기 ㅇ 자동으로 롤링되는 배너 만들기 ㅇ 애니메이션 만들기 ㅇ 동적으로 HTML문서를 읽어와 활용하기 - AJAX로 HTML문서를 읽어오기 ㅇ jQuery-UI Draggable, Droppable - Draggable/Droppable 에서 제공하는 메서드와 옵션 ㅇ jQuery-UI Slider, Sortable - Slider/Sortable 에서 제공하는 메서드와 옵션 ㅇ jQuery jPlayer jPlayer 에서제공하는메서드와옵션알아보기 - 크로스 브라우징을 지원하는 비디오 플레이어 만들기 - HTML5를 이용하여 비디오 플레이 시키기 ㅇ 이미지 갤러리 스크롤 메뉴 만들기 - Thumbnail 슬라이드 구현 및 이미지 활성화 ㅇ 2뎁스 메뉴 만들기 - 1뎁스 오버시 2뎁스 나오게 구현 - 2뎁스 메뉴 구현 - 링크주소를 읽어 해당 메뉴 활성화하기 ㅇ parallax scrolling 사이트 만들기 - i-OS와 같은 pull-to-refresh 메뉴 만들기 39 ㅇ 웹 페이지 제작 프론트엔드 개발자 실무 활용 - II ㅇ 반응형웹 - PC와 모바일에서 다르게 동작하는 반응형 웹사이트 만들기 ㅇ CSS3 미디어쿼리 - CSS3 미디어쿼리를 적용하여 반응형웹 만들기 ㅇ i-Scroll라이브러리를 활용한 모바일 Flikking 만들기 - 모바일 환경에서는 i-Scroll을 적용하여 모바일 환경에 맞도록 변경해 주기 ㅇ CSS3 Animation 효과 - CSS3 2D transform, 3D transform, transition활용 ㅇ jQuery에서는 지원하지 않는 애니메이션 만들어 보기 - 3D CUBE만들어 보기 ㅇ 반응형 웹사이트 포트폴리오 만들기 - JavaScript Hash Event살펴보기 - CSS3 미디어쿼리를 활용하여 반응형 웹사이트 만들기 - 동적으로 페이지를 불러오고 애니메이션을 적용시켜 주기 - 브라우저의 백버튼을 누르면 이전 페이지를 다시 로드시키기 21 ㅇ 반응형 웹페이지 제작
  • 6. 과정별 세부 커리큘럼 과 정 명 워드프레스 & PHP 과정목표 - 워드프레스(wordpress)라는 CMS를 이용하여 단기간에 최고의 효과를 낼 수 있는 사이트 제작을 통하여 웹 전반에 대한 기술과 개념을 확립 하고 실무에 적용한다. 선수과목 HTML&CSS, 웹 표준&웹 접근성, HTML&jQuery 세부커리큘럼 (48시간) 단원명 세부내용 시간 결과물 워드프레스 활용 - 워드프레스를 이해 /활용 - 웹환경의 변화 - 웹환경과 워드프레스 - 가입형 워드프레스 가입 - MySQL 기초 데이터 베이스 만들기 - 설치형 워드프레스 설치 - 설정하기 - 테마 선택하기 - 사이트 제작 실무 - 컨텐츠 제작 - 호스팅형 워드프레스 설치 - 워드프레스 설정 - 사이트 구조/메뉴 만들기 - 웹사이트 꾸미기 - 한국형 게시판 사용하기 - 테마 최적화 - 워드프레스 최적화 - 기능 추가 플러그인 - 테마 변형하기 - 헤더페이지 수정 - 풋터 페이지 수정 - 구조 변경하기 30 PHP 활용 - PHP 간단한 소개 - 웹과 웹 프로그래밍의 이해 - PHP 기본 문법 - 변수/연산자 - PHP 조건 처리 및 조건분기 - PHP 배열 및 처리 - MYSQL 쿼리 - 데이터 베이스 작성 - PHP 와 데이터 베이스연동 18 ㅇ 웹 페이지 제작
  • 7. 과정별 세부 커리큘럼 과 정 명 워드프레스 & PHP 과정목표 - 기능성 홈페이지 구현을 위해 많이 사용되는 PHP와 MySQL에 대한 이 해 및 구현 방법을 습득하고 중․소형 서버에서 주로 사용되는 웹 어플 리케이션 구현 기술을 습득하여 회원가입 및 게시판 등 관리페이지 제 작 등의 업무를 수행할 수 있다. 선수과목 HTML&CSS, 웹 표준&웹 접근성, HTML&jQuery 세부커리큘럼 (48시간) 단원명 세부내용 시간 결과물 PHP & MySQL - PHP 간단한 소개 - 웹과 웹 프로그래밍의 이해 - PHP 기본 문법 - 변수/연산자 - PHP 조건 처리 및 조건분기 - PHP 배열 및 처리 - 데이터베이스의 이해 - MYSQL 쿼리 - 데이터 베이스 작성 - PHP 와 데이터 베이스연동 - 게시판 페이지 - 게시판 입력 및 모듈화/게시판 수정 및 모듈화 - 게시판 삭제 / 검색 / 페이징 모듈 - 게시판 테이블 연결 - 세션/쿠키 - 로그인 시스템 - 게시판 작성 연습 33 PHP & MySQL 실무적용 - 실전 PHP 개발 - 베이스 모듈 개발 - 데이터 베이스 연동 - 수정입력삭제업데이트 모듈화 - 권한 관리모듈 - MVC 모델화 - 블로그 관리페이지 - 블로그 연동 및 연습 - 상품 관리 페이지 - 상품 카테고리 - 상품 판매 페이지 - 장바구니 시스템 - 집계 데이터 가공및 처리 - 프레임웍(CodeIgniter,Cake PHP)/CMS 소개 - 호스팅 환경의 이해 - 서버 호스팅을 포트폴리오 이전 - 포트폴리오 완성 27 ㅇ 개인 포트폴리오