웹프로그래밍 (Web Programming)

2016년 봄학기 (2학년 1학기)

정보보호학과 이병천 교수
강의시간 및 강의실: 화2-3, 목5-6, C6-815

수강생 홈페이지

강보경 | 강신선 | 강완엽 | 강인제 | 강호세 |    | 권용호 | 권희상 | 김근오 | 김수운 | 김인호 |

김정식 | 김주형 | 김지현 | 김진용 | 박세연 |    | 박순현 | 백진이 | 서영우 | 오수빈 | 원동운 |

윤성준 | 이정한 | 이제영 | 임의수 | 장한빈 |    | 진영훈 | 진효준 | 천호범 | 최병준 | 한규범 |


공지사항

3.24(목) 1차 필기시험 - HTML5 태그에 대한 필기시험
- HTML5 태그에 대한 이해도를 컴퓨터를 사용하지 않고 필기시험으로 테스트

3.29(화) 2차 실기평가 - HTML5 를 적용한 홈페이지 발표 및 평가
- 메뉴체계를 가지는 복수페이지를 갖는 홈페이지
- 자기소개, 실습과제, 유용한 링크, 세계보안엑스포 참관 후기, 기타 등등
- 실습과제는 교재 장별로 별도 페이지를 작성하여 링크

4.21(목) 3차 실기평가 - CSS3를 적용한 홈페이지 발표 및 평가
- 자신의 홈페이지에 CSS3 기술을 적용
- 교재 장별로 실습한 페이지를 작성하여 링크
- 어떤 특징적인 CSS가 어떻게 적용되었는지 발표

6.16(목) 4차 실기평가 - 자바스크립트를 적용한 홈페이지 발표 및 평가
- 자바스크립트를 창의적으로 활용한 프로젝트성 서비스 페이지를 설계 및 구현
- HTML5, CSS3, 자바스크립트를 종합 활용한 자신의 홈페이지 작성
- 발표자료를 ppt, prezi 등으로 준비하여 발표에 활용
- 자신의 홈페이지를 직접 보여주면서 데모


교과목 개요

최근 인터넷의 사용이 일상화되면서 많은 종류의 실생활 서비스들이 인터넷을 통해 웹의 형태로 제공되고 있다. 대부분의 기업, 관공서, 조직 등은 물론 개인들까지 여러 가지 자신의 인터넷 홈페이지를 만들어 운영하고 있다. 그러므로 웹서비스를 설계하고 프로그래밍하고 구축하여 적절하게 제공하는 기술은 오늘날 매우 중요한 기술이라고 할 수 있다.

웹프로그래밍이란 WWW(World Wide Web) 서비스를 구축하기 위해 사용되는 HTML, JavaScript, PHP, ASP, JSP 등 각종 프로그래밍 언어들을 이용하여 웹서비스를 구축하는 기술을 말한다. 특히 제공되는 서비스가 동적으로 바뀌면서 데이터베이스와 연동하여 각종 데이터를 처리하고 페이지를 만들어 제공하는 동적 웹프로그래밍이 매우 중요하게 되었다.

본 강의에서는 다음과 같은 내용으로 진행한다.

  1. 인터넷 환경에서 웹서비스를 제공하는 방식에 대해 그 원리를 설명하고 웹프로그래밍에 사용되는 언어들에 대해서 소개한다.
  2. 자신의 실습용 컴퓨터에 웹서버를 설치하여 실습 환경을 구축하는 방법을 소개한다.
  3. 가장 기본적인 마크업 언어인 HTML5에 대해 소개하고 홈페이지를 작성하는 방법을 실습한다.
  4. CSS를 이용하여 디자인의 일관성을 가지는 홈페이지를 작성하는 방법을 실습한다.
  5. 클라이언트쪽 스크립트 언어인 자바스크립트를 이용하는 방법을 배운다.
  6. 배운 기술들을 종합 활용하여 특색있는 콘텐츠를 가진 자신의 홈페이지를 작성하고 서비스를 운영한다.

최종적으로 자신이 구축한 홈페이지의 완성도에 따라 평가한다. 이번 강의에서 배운 내용들을 충실하게 이용하고 적용하여야 한다.


교재

교재 : HTML5+CSS3+Javascript로 배우는 웹프로그래밍 기초, 인피니티북스

부교재: HTML5 웹프로그래밍 입문, 한빛미디어


강의자료

실습 환경 구축하기

1장. 기초사항

2장. HTML5 기본 요소

3장. HTML5 멀티미디어와 입력 양식

4장. CSS3 스타일 시트 기초

5장. CSS3 박스 모델과 응용

6장. CSS3 레이아웃과 애니메이션

7장. HTML과 CSS로 웹사이트 만들기

8장. 자바스크립트 기초

9장. 자바스크립트 객체

10장. DOM과 이벤트 처리, 입력 검증

11장. 자바스크립트와 캔버스로 게임 만들기

12장. jQuery, Ajax, JSON

13장. HTML5 위치 정보와 드래그와 드롭

14장. HTML5 웹 스토리지, 파일 API, 웹 소켓

15장. JSP

16장. 모바일 웹 페이지


ajax 데모

jQueryMobile 데모

bootstrap 데모

angular.js 데모 (강의자료)

w3schools.com 튜토리얼 - jquery | jquerymobile | ajax | angularJS


자바스크립트 암호 - forge

RSA 알고리즘 데모


평가 방법

실습평가: 자신의 홈페이지에 실습과제라는 페이지를 만들고 각 장별로 소개된 기술들을 적용하고 테스트하는 페이지를 각 장별로 만들어서 링크합니다.

시험평가

  1. 퀴즈시험. HTML 소스 분석
  2. 발표 1. HTML5 적용 홈페이지
  3. 발표 2. CSS3 적용 홈페이지
  4. 발표 3. 자바스크립트 적용 홈페이지
  5. 발표 4. 기말고사, 최종 홈페이지 발표 (발표자료 준비)

안내사항: 이 강의에서 배운 기술적인 내용을 자신의 홈페이지에 최대한 적용하겠다는 목표를 가져야 함. 웹프로그래밍 기술 자체를 자신의 홈페이지에 잘 정리하는 것도 좋은 목표가 될 것임. 홈페이지 방문자가 좋아할 만한 유익한 내용으로 꾸미는 것을 목표. 콘텐츠 자체는 외부에서 카피해도 상관없음. 자신의 홈페이지이므로 자신에 대한 소개 내용이 필요