HTML5 주말 무료 교육 - 1일차 : 수업내용 요약

* 교육명 : 개방형 ICT 기술향상을 위한 Web OS기반의 모바일 개발 과정

* 사업명 : 국가인적자원개발 컨소시엄 전략분야 인력양성사업

* 교육 주관 : 한국소프트웨어산업협회(KOSA)

* 교육 기간 : 주말. 2016.10.22~2016.11.05 (5일간)

* 강의 수강 동기 : 온오프믹스 사이트에서 알게 되어 신청하게 됨

<강사님 정보>

강사이름 : 김 정현

메일주소 : unicodaum@hanmail.net

<과정 정보>

이 과정은 HTML5 태그, CSS3 의 기초구문, JavaScript 기초구문, 

HTML5 JavaScript API 를 사용한 웹앱 개발방법을 학습하는 교육과정입니다.

<사전 설문조사>

학습에 들어가기 전에 여러분들의 선수지식과 교육입과 동기등을 파악하여 

좀 더 효과적인 교육이 진행될 수 있도록 하기위해 사전설문을 진행합니다.

다음 내용을 작성하여(메일 본문내용) 메일로 보내주세요.

[ 메일제목 : HTML5주말반-XXX(이름) ]

1. Web 프로그래밍 경험 여부(클라이언트 : html, css)

2. Web 프로그래밍 경험 여부(서버 : asp, php,jsp, cgi, node.js 등)

3. JavaScript 프로그래밍 가능 여부(상, 중, 하, 모름)

4. 과정 입과 동기(목적)를 작성해 주세요.

5. 학습관련 건의사항을 작성해 주세요.

<사이트 정보>

 - 월드 와이드 웹 컨소시엄 URL : https://www.w3.org/

 - 이클립스 다운 URL : http://www.eclipse.org/

 - 톰캣 다운 URL : http://tomcat.apache.org/

 - 각 브라우저마다 점수를 매겨줌 : http://www.html5test.com

 - HTML/CSS/JAVASRIPT 등 웹에서 테스트 가능 : http://www.w3schools.com

 - 브라우저별 비디오 태그 지원 여부 : http://www.caniuse.com

 - 모바일 종류별 화면 출력 테스트 제공 : http://troy.labs.daum.net/

<수업 환경>

 - 이클립스는 MARS버전 다운 받음

 - 톰캣은 8.0.38 ZIP버전은 다운 받음

<수업 내용>

 - 이클립스 열어서 톰캣서버 설치

 - 기본 포트가 8080으로 되어있는데, 오라클에서도 쓰고 있으므로 8000으로 바꿔서 사용할거다.

 - 다이나믹 웹 프로젝트 만들기

 - 이클립스에서 UTF-8 설정하기

   ㄴ 윈도우즈 운영체의 캐릭터셋은 MS949이다. (MS949, EUC-KR, KSC5601은 모두 한국어 코드셋을 의미함)

   ㄴ 리눅스/유닉스는 EUC-KR임

   ㄴ 그런데 우리는 UTF8(UTF-8)로 쓸거야. 현재 대부분의 웹페이지는 UTF8로 되어 있기 때문이야

   ㄴ Window - Preferences > General > Workspace > "Text file encoding" : 저장할 때 UTF8로 저장할거라는 뜻

   ㄴ Window - Preferences > Web > HTML Files > "Encoding" > UTF-8로 바꿔줌 : 브라우저가 표현할 캐릭터셋을 설정

 - http://localhost:8000/edu/first.html  <-- URL 문자열

                              /edu/first.html  <-- URI 문자열(요청하는 자원의 패스정보)

 - 웹 브라우저(HTTP 클라이언트) <----> 웹 서버(HTTP 서버)

   ㄴ Connection Oriented로 동작 (장점: 신뢰성 있는 통신, 단점: 처리율이 낮다). 단점 보완 위해 Stateless방식을 사용

   ㄴ 요청-응답 통신 방식의 프로토콜임.

       요청-요청메세지(요청방식(GET/POST,...), URI, ...)

       요청-응답메세지(응답상태코드(200/404/500 등), 응답내용, ...)

 - 싱글사이드 태그 : 종료 태그가 없는 태그. img, br, hr태그 등

 - 더블사이드 태그 : 시작-종료 태그가 있는 태그.

 - HTML5에서는 자바스크립트 기능을 쓰지 않고 required 속성을 통해 input태그 내용을 보내줄 수 있다.

   <예>   

   <input type="text" name="account" required>

   <input type="text" name="account" required="required">

 - 원래는 자기를 내려준 서버와만 통신할 수 있으나, ActiveX는 다른 서버와도 통신할 수 있도록 해 놓았다.

   HTML5 API는 표준적인 방법으로 모든 브라우저에서 지원할 수 있도록 만들어 놓았다(자바스크립트 기반)

 - HTML5로 구현한 것은 웹앱 형태로 아이폰/안드로이드 구분 없이 사용이 가능하게 되어 있다.

 - HTML5 이전 버전에서는 file이 하나밖에 업로드가 안되었으나, 복수의 파일 선택이 가능하게 되었다.

   (기존에는 activeX를 사용해야 했음)

 - contenteditable 속성 : 값을 true로 주면, 페이지에서 해당 태그의 내용을 수정할 수 있음. 모든 태그에 쓸 수 있다.

 - 2가지 스타일 : block 스타일(행 단위 렌더링), inline 스타일(옆으로 붙이는 렌더링)

* HTML 4.01 <form>태그의 구성 타입

 <input type="text" ...>

 <input type="password" ...>

 <input type="button" ...>

 <input type="submit" ...>

 <input type="reset" ...>

 <input type="file" ...>

 <input type="checkbox" ...>

 <input type="radio" ...>

 <input type="hidden" ...>

 <input type="image" ...>

 <select>

 <textarea>

 <fieldset>

* HTML5 <form>태그의 구성 타입

 <input type="number" ...> <-- 숫자 제대로 들어갔는지 체크해 줌

 <input type="tel" ...> <-- 브라우저가 정해놓은 규격은 없음. pattern속성을 사용해 제어할 수 있음

 <input type="url" ...> <-- 

 <input type="email" ...> <-- 이메일 형식으로 작성되게끔

 <input type="color" ...> <-- 칼라 다이얼로그를 띄어줌

 -- 날짜 관련 input 태그 시작 ----------

 <input type="date" ...>

 <input type="time" ...>

 <input type="week" ...>

 <input type="month" ...>

 <input type="datetime-local" ...>

 -- 날짜 관련 input 태그 끝 ----------

 <input type="required" ...>

 <input type="placeholder" ...>

 <input type="pattern" ...>

 <input type="focus" ...>

 <datalist>태그 <-- 자동완성 기능 제공