1. |
|
모바일 환경의 개요 |
모바일 웹콘텐츠와 관련된 주변기기와 웹브라우저 등의 기본 내용을 학습한다.
모바일웹 콘텐츠 표준의 새롭게 부각되고 있는 HTML5의 기본내용을 안다.
HTML5에 새롭게 추가된 내용들을 간단하게 살펴본다. |
|
|
|
개발환경 이해 |
HTML5 개발을 위한 환경을 이해하고 준비한다.
HTML5로 개발된 작품들 소개와 이해 |
|
|
|
프로젝트 팀구성 |
모바일 웹콘텐츠 프로젝트 제작을 위한 팀구성을 한다.
팀에서 진행할 프로젝트의 아이템을 논의하여 정한다.
팀원들의 역할을 분담하고 제작 보고서를 작성한다. |
|
2. |
|
시맨틱 웹을 위한 요소들 |
레이아웃을 위한 요소들
HTML5에 추가된 요소들 살펴보기 |
|
|
|
시맨틱 웹을 위한 요소들 |
표현을 위한 요소들
실습을 통한 확인 |
|
|
|
웹 태그들의 실사용 예 |
웹 태그를 이용하여 프로그램을 구현할 수 있다.
웹 태그를 활용한 프로그램을 다양한 웹 브라우저에서 보고 브라우저에 따라 실행되는 화면을 비교할 수 있다. |
|
3. |
|
Canvas(1) |
Canvas 요소를 알고 사용할 수 있다.
사각형 그리기를 사용하여 프로그램을 구현할 수 있다.
선 그리기를 사용하여 프로그램을 구현할 수 있다. |
|
|
|
Canvas(2) |
다각형 그리기를 할 수 있다.
원호 그리기를 할 수 있다. |
|
|
|
Canvas(3) |
직선과 접하는 원호 그리기를 할 수 있다.
베지어 곡선 그리기를 할 수 있다. |
|
4. |
|
Canvas-II(1) |
스타일 지정하는 방법을 익히고 프로그램으로 구현할 수 있다. |
|
|
|
Canvas-II(2) |
스타일 지정하는 방법을 익히고 프로그램으로 구현할 수 있다. |
|
|
|
Canvas-II(3) |
텍스트 삽입하기를 익히고 프로그램으로 구현할 수 있다.
이미지 삽입하기를 익히고 프로그램으로 구현할 수 있다. |
|
5. |
|
오디오 & 비디오(1) |
오디오와 비디오 재생 방법을 익히고 프로그램으로 구현할 수 있다. |
|
|
|
오디오 & 비디오(2) |
비디오 재생하는 방법을 익히고 프로그램으로 구현할 수 있다.
오디오와 비디오 제어하는 방법을 익히고 프로그램을 구현할 수 있다 |
|
|
|
오디오 & 비디오(3) |
미디어의 이벤트를 처리하는 방법을 익히고 프로그램을 구현할 수 있다.
미디어를 이용한 프로그램 실 사례를 통한 미디어 다루고 원활하게 프로그램을 구현할 수 있다. |
|
6. |
|
폼(1) |
입력타입에 관련된 input요소와 form요소를 알고 프로그램을 구현할 수 있다. |
|
|
|
폼(2) |
미디어의 이벤트를 처리하는 방법을 익히고 프로그램을 구현할 수 있다. 미디어를 이용한 프로그램 실 사례를 통한 미디어 다루고 원활하게 프로그램을 구현할 수 있다. |
|
|
|
폼(3) |
폼의 속성에 대해서 알고 프로그램을 구현할 수 있다. |
|
7. |
|
CSS3 글꼴과 문자(1) |
CSS에 대해서 알고 프로그램을 구현할 수 있다. |
|
|
|
CSS3 글꼴과 문자(2) |
선택자에 대해서 알고 이를 프로그램으로 구현할 수 있다.
글꼴을 알고 프로그램으로 구현할 수 있다. |
|
|
|
CSS3 글꼴과 문자(3) |
사용자 폰트 스타일 지정방법을 익히고 프로그램으로 구현할 수 있다.
텍스트와 관련된 다양한 속성들을 익히고 프로그램으로 구현할 수 있다. 그림자 효과 스타일 지정방법을 익히고 프로그램으로 구현할 수 있다. 특정 영역 안의 텍스트 스타일 지정 방법을 익히고 프로그램으로 구현할 수 있다. |
|
8. |
|
CSS3 배경과 박스(1) |
배경에 대해서 이해하고 프로그램으로 구현할 수 있다. 여러 개의 배경 이미지 지정을 알고 이를 활용해 프로그램을 구현할 수 있다.
배경 이미지의 위치 조절하는 방법을 알아 프로그램을 구현할 수 있다.배경 이미지의 기준 위치 조절 방법을 알아 프로그램을 구현할 수 있다.
배경 이미지의 크기 지정 방법을 알아 프로그램을 구현할 수 있다. |
|
|
|
CSS3 배경과 박스(2) |
색상에 대해서 알고 프로그램으로 구현할 수 있다.
색상지정에 대해서 알고 프로그램으로 구현할 수 있다.
그라데이션에 대해서 알고 프로그램으로 구현할 수 있다.
벤더 프리픽스(Vender prefix) 에 대해서 알고 프로그램으로 구현할 수 있다.
박스에 대해서 알고 프로그램으로 구현할 수 있다.
박스 라운딩 스타일 지정에 대해서 알고 프로그램으로 구현할 수 있다.
박스 그림자 스타일 지정에 대해서 알고 프로그램으로 구현할 수 있다. |
|
|
|
CSS3 배경과 박스(3) |
다단과 관련된 속성들을 이해하고 프로그램으로 구현할 수 있다. |
|
9. |
|
CSS3 애니메이션(1) |
트랜지션에 대해서 알고 프로그램을 구현할 수 있다.
요소의 변화지정을 할 수 있어서 프로그램으로 구현할 수 있다.트랜스폼의 정의와 관련 속성들을 알아 프로그램으로 구현할 수 있다.
요소의 모양변경을 알고 관련 속성들을 다룰 줄 알아 프로그램으로 구현할 수 있다. |
|
|
|
CSS3 애니메이션(2) |
요소의 모양 변경에 대해서 알고 프로그램으로 구현할 수 있다. 기준점 설정을 알고 프로그램을 구현할 수 있다. 요소의 모양 변경과 관련 속성을 알고 프로그램으로 구현할 수 있다. 키프레임을 알고 프로그램구현이 가능하게 된다.
애니메이션 지정에 대해서 알고 프로그램구현이 가능하게 된다. |
|
|
|
CSS3 애니메이션(3) |
애니메이션 지정하는 방법을 알고 프로그램을 구현할 수 있다.
미디어쿼리에 대해서 알고 프로그램을 구현할 수 있다. |
|
10. |
|
드래그 앤 드롭 & 텍스트 편집(1) |
드래그 앤 드롭에 대해서 이해하고 프로그램으로 구현할 수 있다.
이벤트를 알고 이를 이용하여 프로그램으로 구현할 수 있다.
데이터 전달방법을 알고 이를 이용하여 프로그램으로 구현할 수 있다. |
|
|
|
드래그 앤 드롭 & 텍스트 편집(2) |
포인터 변경방법을 알고 이를 이용하여 프로그램으로 구현할 수 있다.
텍스트 편집 |
|
|
|
드래그 앤 드롭 & 텍스트 편집(3) |
텍스트 선택 방법을 알고 이를 이용하여 프로그램으로 구현할 수 있다.
텍스트 선택 객체 생성 방법을 알고 이를 이용하여 프로그램으로 구현할 수 있다.
텍스트 선택 지정 방법을 알고 이를 이용하여 프로그램으로 구현할 수 있다. |
|
11. |
|
웹 스토리지 & 웹 데이터베이스(1) |
웹스토리지를 관리하는 방법과 관련 속성들을 알고 이를 이용하여 프로그램을 구현할 수 있다. 로컬스토리지를 관리하는 방법과 관련된 속성 등의 내용을 알고 프로그램으로 구현할 수 있다. |
|
|
|
웹 스토리지 & 웹 데이터베이스(2) |
세션 스토리지에 대해서 알고 이를 활용하여 프로그램으로 구현할 수 있다.
웹 데이터베이스에 대해서 알고 이를 활용하여 프로그램으로 구현할 수 있다.
웹 데이터베이스 생성 및 접근에 대해서 알고 이를 활용하여 프로그램으로 구현할 수 있다. |
|
|
|
웹 스토리지 & 웹 데이터베이스(3) |
SQL 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
12. |
|
웹 워커 & 웹 소켓 |
웹 워커 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. 멀티 태스킹과 멀티 스레드 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. 워커생성 및 메시지전달 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
|
|
웹 워커 & 웹 소켓(2) |
공유 워커의 사용법을 알고 프로그램으로 구현할 수 있도록 준비된다. 웹 소켓의 사용법을 알고 프로그램으로 구현할 수 있도록 준비된다.
웹 소켓 클라이언트의 사용법을 알고 프로그램으로 구현할 수 있도록 준비된다. |
|
|
|
웹 워커 & 웹 소켓(3) |
웹 소켓 서버 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다.
웹 소켓
jWebSocket 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
13. |
|
파일 접근 & 오프라인 접근(1) |
파일 접근 처리방법과 실행 방법을 익히고 실습한다.
파일 정보 처리방법과 실행 방법을 익히고 실습한다. |
|
|
|
파일 접근 & 오프라인 접근(2) |
파일 접근 처리방법과 실행 방법을 익히고 실습한다.
파일 정보 처리방법과 실행 방법을 익히고 실습한다. |
|
|
|
파일 접근 & 오프라인 접근(3) |
매니페스트 파일 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. 이벤트 처리 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
14. |
|
위치 정보 & 모바일 |
위치정보 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다.
현재위치 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
|
|
위치 정보 & 모바일(2) |
현재위치파일 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다.
지도서비스파일 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
|
|
위치 정보 & 모바일(3) |
모바일 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다.
웹앱 개발 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다.
JQTouch 라이브러리 실행 및 처리 방법을 알고 프로그램을 구현할 수 있다. |
|
15. |
|
참고예제들(1) |
참고예제들을 둘러보고 다양한 예제들을 접하여 프로그램 구현능력을 키운다 |
|
|
|
참고예제들(2) |
참고예제들을 둘러보고 다양한 예제들을 접하여 프로그램 구현능력을 키운다 |
|
|
|
참고예제들(3) |
참고예제들을 둘러보고 다양한 예제들을 접하여 프로그램 구현능력을 키운다 |
|