소실4 - HTML, CSS, JS, JSP

Schedule	Lecture
Week 1	수업 소개
Week 2	HTML 기초
Week 3	HTML 고급 - 멀티미디어, 입력 양식
Week 4	CSS, HTML로 홈페이지 만들기 (과제 1)
Week 5	CSS - 박스 모델
Week 6	CSS - 레이아웃, 애니메이션
Week 7	과제 1 발표
Week 8	중간고사 기간
Week 9	Javascript 기초
Week 10	Javascript 객체
Week 11	DOM, 이벤트 처리, 입력
Week 12	JSP, 프로젝트 설명
Week 13	JQuery
Week 14	Web server, MySQL
Week 15	프로젝트 발표
Week 16	기말고사

 

1장 기초사항

• HTML5 Web storage: www.w3schools.com/html/html5_webstorage.asp
• HTML5 SVG: www.w3schools.com/html/html5_svg.asp
• HTML5 Web SQL Database: www.tutorialspoint.com/html5/html5_web_sql.htm

 

2장 HTML5 기본요소

• p tag: paragraph. p tag 전후에 빈 줄이 추가됨.
• pre tag: 입력한 그대로 화면에 표시됨.
• 특수문자: &nbsp;( ) &lt; (<) &gt; (>) &quot; (") &amp; (&)
• 수평선(hr), 리스트(ul, ol, li), 정의리스트(dl, dt, dd), 링크(a), 이미지(img), 테이블(table, tr, th, td, caption)

 

3장 HTML5 멀티미디어와 입력요소

• 오디오(audio, source), 비디오(video, source)
• textarea tag: 자동 줄바꿈됨.
• iframe, 영역(div), 텍스트 영역(span)
• 입력양식(form, input, textarea, select, fieldset)
  • input tag의 type 속성은 매우 다양함. text, password, radio, checkbox, submit 등...
  • name 속성의 값이 서버로 전달되는 이름임.
  • get/post: 입력 데이터를 서버로 보내는 방식. get은 url에 파라미터를 붙여서, post는 http request header에 포함시켜 데이터를 전달함.
• 정규식: regexr.com/

 

4장 CSS3 기초

5장 CSS3 박스모델과 응용

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

 

8장 Javascript 기초

• 위치: 내부(script tag), 외부(xxx.js), 인라인
• document.write()
• getElementById(), parseInt() ...
• if-else if-else, switch, while, for, for-in, array, function 모두 가능
• alert(), confirm(), prompt() ...

9장 Javascript 객체

 

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

 

12장 Jquery, Ajax, JSON

 

15장 JSP, mysql_session

• php, asp, jsp, node.js, ruby 등으로 서버에 접근해야 함
• JSP(= Java Server Pages): Java Servlet 기반, <% ~ %>
• Tomcat: jsp 엔진의 일종으로, 웹 서버 + JSP 컨테이너의 역할 [서버에 설치되어야]
• JSP 내장 객체 (import 없이 사용 가능)
  
  • request: 클라이언트의 요청 처리
  • response: 클라이언트의 요청에 대한 응답
  • out: 출력 스트림 처리
  • session: 클라이언트의 세션 정보 처리
• php 작동 과정: programmingskills.net/archives/704 [php 엔진도 서버에 설치되어야]