HTML5 입문 인공지능 연구실
HTML5 HTML5의 탄생 XHTML 2.0의 실패 Opera, Mozilla, Apple의 WHATWG 설립 Web Hypertext Application Technology Working Group 브라우저 제조사의 독자적인 워킹 그룹 W3C가 하위 호환성을 고려한 HTML 책정에 착수 W3C와 WHATWG의 공식적인 방향성 공유 WHATWG에서 책정 중이던 사양을 W3C에서 HTML5라 명명을 제안하면서 탄생 왜 HTML5인가? 이전에 HTML언어들은 개발자의 생산성이 떨어짐(크로스 브라우징) Of the Web Developer, By the Web Developer, For the Web Developer
HTML5 지원 정보 브라우저 간에 기능을 지원하는 정도에 차이가 있음 기능 지원 현황 보다 자세한 지원 정보 http://html5test.com/
HTML5의 특징 브라우저간의 서로 다른 HTML 구현 방식을 표준화 Ex) <p><strong>a<em>b</strong>c</em>
HTML5의 특징 (cont.) 구조적 마크업 <header>, <nav>, <article>, <aside>, <footer>
HTML5의 특징 다양한 WebForm 컨트롤 Datetime, number, range, email, url, list, datalist… http://nz.pe.kr/ext/html5/html5L.html
HTML5의 특징 멀티미디어 지원 강화 Audio, Video, Canvas, WebGL Canvas + Video Demo CanvasMol – Canvas + 3D WebGL Musical Solar System Sketchpad deviantART muro Galactic Plunder
HTML5 디자인 원칙 포인트 1: 호환성 콘텐츠의 호환성 과거에 만들어진 웹사이트를 문제없이 이용할 수 있어야 하는 점을 고려 일반적으로 사용되는 콘텐츠를 HTML5에 포함 이전 브라우저와의 호환성 HTML5에는 새로운 기능이 많이 추가되었음 이를 지원하지 않는 예전 브라우저를 통해 접근하여도 어느 정도는 그 기능을 제공할 수 있던지 Fallback 콘텐츠를 표시하도록 고려 기존 기능의 재사용 이용 방법 호환성 브라우저마다 독자적인 기능을 사양화 하여 브라우저간 호환성을 실현하고자 함 혁신보다 발전을 우선함 이상을 추구하여 새로운 것을 개발하는 것이 아닌 현재 있는 것을 개량하고자 함.
HTML5 디자인 원칙 포인트 2: 실용성 이상만을 추구하는 것이 아닌 현재 웹 환경에서 요구하는 것을 개발하고자 함. 사용자, 개발자, 브라우저 개발자, 사양서, 이론의 우선순위를 정함 포인트 3: 상호 운용성 웹 개발자가 브라우저의 차이를 의식하지 않고 개발할 수 있도록 함 쓸데없이 복잡한 것을 없애도록 분명한 원칙을 정함 포인트 4: 보편적 접근성 모든 미디어(PC, 휴대용 장치, 게임기 등), 모든 언어, 모든 사람이 접근할 수 있도록 기능을 개발하도록 함 img요소, video요소, audio요소를 여러 상황에서 사용할 수 있도록 콘텐츠 사용에 대해 규정하고 있음
HTML5 시작하기 HTML4와 HTML5의 차이점 실전 HTML5 가이드 DOCTYPE http://channy.creation.net/project/html5/html4-differences/ 실전 HTML5 가이드 http://html5.creation.net/html5-guide.pdf DOCTYPE 이전 HTML이나 XHTML은 긴 DOCTYPE 선언을 정의 HTML5에서의 DOCTYPE 선언 <!DOCTYPE html> DTD를 선언하는 부분이 존재하지 않음 HTML5 DOCTYPE이 브라우저의 표준 모드
HTML5 마크업 작성 방법 규칙 1: 종료 태그 생략 HTML5 Serialization에서는 이전과 동일하게 종료태그를 생략할 수 있음 하지만 요소마다 상황에 따라 종료 태그를 생략할 수 있는지 규정되어 있기에 주의해야 함 규칙 2: 빈요소 종료태그를 기술해서는 안되는 요소 area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source 잘못된 사용 예 <meta charset="UTF-8"></meta> 바른 예 <meta charset="UTF-8"/>
HTML5 마크업 작성 방법 구분 설명 규칙 3: 요소의 마크업 규칙 HTML5는 XML(XHTML) Serialization 과 같은 기술도 인정함 HTML Serialization 으로 페이지를 작성할 때 기술 방법을 통일하여 기술하여야 함 Ex) <p> 요소의 종료 태그를 생략하였으면 모든 <p> 요소의 종료 태그를 생략하여 기술 규칙 4: 콘텐츠 속성의 마크업 구분 설명 빈 속성 구문 논리 속성의 경우 있는지 없는지 여부가 중요하기에 속성 이름만 마크업하도록 한다. ex) <input disabled> 인용 부호가 없는 구문 <input type=radio name=gender value=male> 속성 이름과 값 사이의 ‘=‘ 앞뒤로 공백을 넣어도 무관 <input type = radio name = gender value = male> 태그를 닫는 ‘/’를 넣을 때 ‘/’앞에 반드시 공백을 넣음 <input type=radio name=gender value=male />
HTML5 마크업 작성 방법 구분 설명 작은따옴표 사용 구문 콘텐츠 속성값에 작은따옴표(‘)가 포함되지 않는다면 이를 사용하여 값을 마크업할 수 있다. <input type=‘radio’ name=‘gender’ value=‘male’> 속성 이름과 값 사이의 ‘=‘ 앞뒤로 공백을 넣어도 무관 <input type = ‘radio’ name = ‘gender’ value = ‘male’> 태그를 닫는 ‘/’를 넣을 때 ‘/’앞에 공백을 넣어도 무관 <input type=‘radio’ name=‘gender’ value=‘male’ /> 큰따옴표 콘텐츠 속성값에 큰따옴표(“)가 포함되지 않는다면 이를 사용하여 값을 마크업할 수 있다. <input type=“radio” name=“gender” value=“male”> 나머지 사항은 위와 동일.
HTML5 문자 인코딩 이전 문자 인코딩 지정 방법 <meta http-equiv=“Content-type” content=“text/html; charset=UTF-8” /> HTML5 문자 인코딩 지정 방법 <meta charset=“UTF-8” /> 둘다 지원 HTML5 문자 인코딩은 UTF-8을 추천 이외 인코딩 사용하면 URL 인코딩, 폼의 처리시 예기치 못한 결과를 가져올 가능성이 있음
HTML5 문자 인코딩 문자 인코딩 지정 시 유의점 파일 시작부터 512byte 내에 지정 실제 문자 인코딩과 meta요소의 charset 속성에 지정한 인코딩 명칭이 일치해야 함 규정된 인코딩 명칭을 사용하여 지정할 것 인코딩 지정 meta 요소는 하나만 기술할 것 XML 사용시 주의점 이 경우 meta 요소가 효과가 없음 일반적인 xml을 선언할 때 인코딩 선언 <?xml version=“1.0” encoding=“UTF-8”>
HTML 구문 검증 HTML5는 아직 책정 중인 사양으로 어떤 검증기도 실험적인 단계이므로 작성 시 참고는 할 수 있으나 타당성을 증명할 수 있는 것은 아니니 주의하여야 함. http://validator.w3.org http://html5.validator.nu
Web Form Web Form HTML문서에서 사용자 입력을 위해 제공되는 양식 태그(Form Tag) input 박스, select 박스, button, checkbox, radio버튼 정도만 제공 Web Form 2.0 HTML5부터 제공하는 향상된 Web Form 추가된 input 타입 : Date Pickers(date, month, week, time), range, number, search, url, email, color http://www.w3schools.com/html5/html5_form_input_types.asp 추가된 Form 속성 : 입력 보조 수단(autofocus, placeholder, required), 파일 선택 양식의 개선(multiple, accept), 패턴 지정(pattern) 등 http://www.w3schools.com/html5/html5_form_attributes.asp 추가된 Form 요소 : datalist, keygen, output http://www.w3schools.com/html5/html5_form_elements.asp
Video/Audio 기존 웹 기반 동영상 서비스 점차 표준을 기반으로 서비스하는 것으로 이동하고 있음. 플래시는 브라우저 안에서 돌아가지만 브라우저와는 완전히 독립적인 방법임. HTML5를 사용하는 것이 플래시보다 더 많은 기능을 제공할 수 있다. 멀티 플랫폼을 지원하는데 문제가 있음. 기존의 표준기술들과 융합이 어렵다.(기존 웹 기반 동영상 서비스의 한계점) YouTube : http://www.youtube.com/html5
Video/Audio 기본 마크업 : Video/Audio <video width=“320” height=“240” controls poster=“load.jpg”> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> Controls: 사용자 에이전트에서 제공하는 컨트롤러를 사용할 것을 나타냄 Poster: 동영상 로딩 중에 보여줄 그림파일을 지정 Source: 하나의 비디오에 대해서 여러 타입의 코덱으로 인코딩된 파일을 연결할 때 사용 디테일한 기능들은 JavaScript를 사용하여 컨트롤함. DOM을 사용하여 Media Element로 제어함. Media Element Method : play, pause, load
Canvas 2D 그래픽 API를 사용할 수 있는 Element WebGL을 기반으로 하는 3D 그래픽용 Canvas의 스펙도 개발 중. 사용하는 attribute : id, width, height, style 모든 그리기 작업은 JavaScript에서 DOM을 사용하여 제어함 그리기 준비 <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas> //canvas의 DOM 객체를 얻는다 var canvas = document.getElementById("cv"); //DOM 객체로부터 2D 컨텍스트를 얻는다 var context = canvas.getContext("2d");
Canvas 선(path) 그리기 beginPath() : 선 그리기 시작을 canvas에 알림. 이전의 선은 모두 초기화 moveTo(x, y) : 선의 시작점 지정 lineTo(x, y) : 이동 점 지정 (직선으로 이동) stroke() : 현재 이동한 경로에 윤곽선 그리기 예제 코드
Canvas 사각형 그리기 fillRect(x, y, width, height) : 색으로 채운 사각형을 그린다 strokeRect(x, y, width, height) : 선만 있는 사각형을 그린다 clearRect(x, y, width, height) : 사각형 영역을 지운다 예제 코드
Canvas 2D 그래픽 API를 사용할 수 있는 Element WebGL을 기반으로 하는 3D 그래픽용 Canvas의 스펙도 개발 중. 사용하는 attribute : id, width, height, style 모든 그리기 작업은 JavaScript에서 DOM을 사용하여 제어함 그리기 준비 <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas> //canvas의 DOM 객체를 얻는다 var canvas = document.getElementById("cv"); //DOM 객체로부터 2D 컨텍스트를 얻는다 var context = canvas.getContext("2d");