Download presentation
Presentation is loading. Please wait.
1
HTML5 입문 인공지능 연구실
2
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
3
HTML5 지원 정보 브라우저 간에 기능을 지원하는 정도에 차이가 있음 이번 실험에서는 크롬 카나리아 빌드를 사용함
기능 지원 현황 보다 자세한 지원 정보 이번 실험에서는 크롬 카나리아 빌드를 사용함 새로운 Web Form을(New Inputs) 사용해보고 싶으면 Opera를 사용
4
HTML5의 특징 브라우저간의 서로 다른 HTML 구현 방식을 표준화
Ex) <p><strong>a<em>b</strong>c</em>
5
HTML5의 특징 (cont.) 구조적 마크업 <header>, <nav>, <article>, <aside>, <footer>
6
HTML5의 특징 (cont.) 다양한 WebForm 컨트롤
Datetime, number, range, , url, list, datalist…
7
HTML5의 특징 (cont.) 멀티미디어 지원 강화 Audio, Video, Canvas, WebGL
Canvas + Video Demo CanvasMol – Canvas + 3D WebGL Musical Solar System Sketchpad deviantART muro Galactic Plunder
8
HTML5 디자인 원칙 포인트 1: 호환성 콘텐츠의 호환성 이전 브라우저와의 호환성 기존 기능의 재사용 이용 방법 호환성
과거에 만들어진 웹사이트를 문제없이 이용할 수 있어야 하는 점을 고려 일반적으로 사용되는 콘텐츠를 HTML5에 포함 이전 브라우저와의 호환성 HTML5에는 새로운 기능이 많이 추가되었음 이를 지원하지 않는 예전 브라우저를 통해 접근하여도 어느 정도는 그 기능을 제공할 수 있던지 Fallback 콘텐츠를 표시하도록 고려 기존 기능의 재사용 이용 방법 호환성 브라우저마다 독자적인 기능을 사양화 하여 브라우저간 호환성을 실현하고자 함 혁신보다 발전을 우선함 이상을 추구하여 새로운 것을 개발하는 것이 아닌 현재 있는 것을 개량하고자 함.
9
HTML5 디자인 원칙 (cont.) 포인트 2: 실용성 포인트 3: 상호 운용성 포인트 4: 보편적 접근성
이상만을 추구하는 것이 아닌 현재 웹 환경에서 요구하는 것을 개발하고자 함. 사용자, 개발자, 브라우저 개발자, 사양서, 이론의 우선순위를 정함 포인트 3: 상호 운용성 웹 개발자가 브라우저의 차이를 의식하지 않고 개발할 수 있도록 함 쓸데없이 복잡한 것을 없애도록 분명한 원칙을 정함 포인트 4: 보편적 접근성 모든 미디어(PC, 휴대용 장치, 게임기 등), 모든 언어, 모든 사람이 접근할 수 있도 록 기능을 개발하도록 함 img요소, video요소, audio요소를 여러 상황에서 사용할 수 있도록 콘텐츠 사용 에 대해 규정하고 있음
10
HTML5 시작하기 DOCTYPE HTML4와 HTML5의 차이점
실전 HTML5 가이드 DOCTYPE 이전 HTML이나 XHTML은 긴 DOCTYPE 선언을 정의 HTML5에서의 DOCTYPE 선언 <!DOCTYPE html> DTD를 선언하는 부분이 존재하지 않음 HTML5 DOCTYPE이 브라우저의 표준 모드
11
HTML5 마크업 작성 방법 규칙 1: 종료 태그 생략 규칙 2: 빈요소
하지만 요소마다 상황에 따라 종료 태그를 생략할 수 있는지 규정되어 있기에 주의해야 함 규칙 2: 빈요소 종료태그를 기술해서는 안되는 요소 area, base, br, col, command, embed, hr, img, input, keygen, link, meta, para m, source 잘못된 사용 예 <meta charset="UTF-8"></meta> 바른 예 <meta charset="UTF-8"/>
12
HTML5 마크업 작성 방법 규칙 3: 요소의 마크업 규칙
HTML5는 XML(XHTML) 시리얼라이제이션과 같은 기술 도 인정함 HTML 시리얼라이제이션으로 페이지를 작성할 때 기술 방법을 통일하여 기술하여야 함 Ex) <p> 요소의 종료 태그를 생략하였으면 모든 <p> 요소 의 종료 태그를 생략하여 기술
13
HTML5 마크업 작성 방법 규칙 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 />
14
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”> 나머지 사항은 위와 동일.
15
HTML5 문자 인코딩 이전 문자 인코딩 지정 방법 HTML5 문자 인코딩 지정 방법
<meta http-equiv=“Content-type” content=“text/html; charset=UTF-8” /> HTML5 문자 인코딩 지정 방법 <meta charset=“UTF-8” /> 둘다 지원 HTML5 문자 인코딩은 UTF-8을 추천 이외 인코딩 사용하면 URL 인코딩, 폼의 처리시 예기치 못 한 결과를 가져올 가능성이 있음
16
HTML5 문자 인코딩 문자 인코딩 지정 시 유의점 XML 사용시 주의점 파일 시작부터 512byte 내에 지정
실제 문자 인코딩과 meta요소의 charset 속성에 지정한 인코딩 명칭 이 일치해야 함 규정된 인코딩 명칭을 사용하여 지정할 것 인코딩 지정 meta 요소는 하나만 기술할 것 XML 사용시 주의점 이 경우 meta 요소가 효과가 없음 일반적인 xml을 선언할 때 인코딩 선언 <?xml version=“1.0” encoding=“UTF-8”>
17
HTML 구문 검증 HTML5는 아직 책정 중인 사양으로 어떤 검증기도 실험적인 단계이므로 작성 시 참고는 할 수 있으나 타당성을 증명할 수 있는 것은 아니니 주의하여야 함.
18
Web Form Web Form Web Form 1.0 Web Form 2.0
HTML문서에서 사용자 입력을 위해 제공되는 양식 태그(Form Tag) Web Form 1.0 지금까지 사용되던 Web Form input 박스, select 박스, button, checkbox, radio버튼 정도만 제공 Web Form 2.0 HTML5부터 제공하는 향상된 Web Form 추가된 input 타입 : Date Pickers(date, month, week, time), range, number, search, url, , color 추가된 Form 속성 : 입력 보조 수단(autofocus, placeholder, required), 파일 선택 양식의 개선(multiple, accept), 패턴 지정(pattern) 등 추가된 Form 요소 : datalist, keygen, output
19
Video/Audio 기존 웹 기반 동영상 서비스 YouTube : http://www.youtube.com/html5
점차 표준을 기반으로 서비스하는 것으로 이동하고 있음. 플래시는 브라우저 안에서 돌아가지만 브라우저와는 완전히 독립적인 방법임. HTML5를 사용하는 것이 플래시보다 더 많은 기능을 제공할 수 있다. 멀티 플랫폼을 지원하는데 문제가 있음. 기존의 표준기술들과 융합이 어렵다.(기존 웹 기반 동영상 서비스의 한계점) YouTube :
20
Video/Audio (cont.) 기본 마크업 : 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
21
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> var canvas = document.getElementById("cv"); //canvas의 DOM 객체를 얻는다 var context = canvas.getContext("2d"); //DOM 객체로부터 2D 컨텍스트를 얻는다
22
Canvas (cont.) 선(path) 그리기 예제 코드
beginPath() : 선 그리기 시작을 canvas에 알림. 이전의 선은 모두 초기화 moveTo(x, y) : 선의 시작점 지정 lineTo(x, y) : 이동 점 지정 (직선으로 이동) stroke() : 현재 이동한 경로에 윤곽선 그리기 예제 코드 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script type="text/javascript"> function init() { var canvas = document.getElementById("drawCanvas"); var context = canvas.getContext("2d"); context.beginPath(); //패스 그리기 시작 context.moveTo(50,10); //패스 시작점 지정 context.lineTo(20 ,100); //패스 이동점 지정 context.lineTo(80 ,100); context.stroke(); //윤곽선 그리기 } </script> </head> <body onload="init()"> <canvas id="drawCanvas" width="400" height="300" style=" position: relative; border: 1px solid #000;"></canvas> </body> </html>
23
Canvas (cont.) 사각형 그리기 예제 코드
fillRect(x, y, width, height) : 색으로 채운 사각형을 그린다 strokeRect(x, y, width, height) : 선만 있는 사각형을 그린다 clearRect(x, y, width, height) : 사각형 영역을 지운다 예제 코드 <script type="text/javascript"> function init() { var canvas = document.getElementById("drawCanvas"); var context = canvas.getContext("2d"); context.fillRect(10,10,100,100); //색으로채운 사각형 context.strokeRect(120,10,100,100); //윤곽만 있는 사각형 context.fillRect(230,10,100,100); //색으로 채운 사각형 context.clearRect(230,10,50,50); //앞 사각형의 절반을 지움 } </script>
24
실습 (HTML5 및 JavaScript 활용)
간단한 그림판 만들기 선 그리기, 사각형 그리기, 지우개 기능 색깔 변경 가능 context.strokeStyle = “black” 선 굵기 변경 가능 context.lineWidth = 1 기본 코드 강의자료 페이지에 있는 canvasExample.php를 사용
25
HTML 부분
26
InitEvent 처리함수
27
Pencil Function
28
Rectangle Function
29
Canvas 내의 좌표 처리 및 Select 처리 Function
30
※ 참고 Eclipse에서 코드 실행 시 크롬 카나리아에서 실행되도록 설정하기
31
※ 참고 (cont.) 시작->프로그램->Google 크롬 카나리아 빌드-> 실행아이콘에 오른쪽버튼->속성 ‘대상(T)’ 값에서 따옴표 제외하고 전체 복사->아래 그림의 Location에 붙여넣기 Name은 마음대로…
32
※ 참고 (cont.)
Similar presentations
