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) | 참고예제들을 둘러보고 다양한 예제들을 접하여 프로그램 구현능력을 키운다 | ![]() |