HTML5 입문 인공지능 연구실.

Slides:



Advertisements
Similar presentations
3Ksoft Xstyler 교육자료. 일반 웹 브라우저에서 XML 문서를 생성할 수 있는 Webform( 데이터 입력양식 ) 을 WYSIWYG GUI 환경에서 손쉽게 제작 가능한 프로그램. 제작한 Webform 을 X-DRP 서버 시스템에 손쉽게 등록가능 X-DRP 서버에.
Advertisements

© 2013 인피니티북스 All rights reserved CHAPTER 3. HTML 멀티미디어와 입력요소.
VC-1 코덱 정리 (Silverlight) 이과장 (
JSON (JavaScript Object Notation) 인공지능 연구실. Artificial Intelligence Laboratory JSON 소개  JSON( 제이슨, JavaScript Object Notation) 은, 인터넷에 서 자료를 주고받을 때 그.
XHTML Basic 제 13 장 1. XHTML Basic의 개요 2. XHTML Basic 기본 문법 3. 표 만들기
웹 호환성 향상 전략 조 훈 DBDIB DBDIB.
Chapter06 폼 HTML5 Programming.
HTML5 & API 입문(1차) 발표자 : 김선영.
Chapter04 캔버스(2) HTML5 Programming.
Chapter 16 : Struts 프레임워크 2. chapter 16 : Struts 프레임워크 2.
Chapter05 HTML 홈페이지 만들기
Canvas 2D Basics.
.Net Web Application 2010 컴퓨터공학실험(Ⅰ)
1 HTML5 개요.
HTML5 Overview 숙명여자대학교 임순범.
HTML5 입문 인공지능 연구실.
Windows 8 Ksystem G&I 설치.
forms 객체 입력상자 체크상자, 라디오 버튼 목록상자
Chapter05 오디오와 비디오 HTML5 Programming.
HTML5 입문 인공지능 연구실.
마우스(Mouse) 다루기 컴퓨터응용 및 실습 I.
11장. 포인터 01_ 포인터의 기본 02_ 포인터와 Const.
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
iframe 사용하기 Chapter 3 Part 2
HTML5+CSS3 실무 테크닉 김은기 저.
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
Slice&link.
10강. JSP 본격적으로 살펴보기-II 스크립트릿, 선언, 표현식 지시자 주석 Lecturer Kim Myoung-Ho
2018년 10월 08일 박성진 Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진
인터넷응용프로그래밍 JavaScript(Intro).
Chapter03 캔버스(1) HTML5 Programming.
Chapter10 드래그 앤 드롭 & 텍스트 편집 HTML5 Programming.
게임웹사이트운영 [10] 폼 작성.
7가지 방법 PowerPoint에서 공동 작업하는 다른 사용자와 함께 편집 작업 중인 사용자 보기
HTML 5+ 자바스크립트 발표자 : 김동한 7주차.
9장 웹 사이트 초기 화면 제작 한빛미디어(주).
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
1. HTML5란? 2. HTML5의 역사와 흐름 3. HTML5와 CSS의 브라우저 지원
HTML5 Canvas 태그 92팸 유승연 안동찬 엄태인 김영재.
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계
프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
Clipping 이진학.
웹디자인
08장 쿠키와 세션.
Windows XP 서비스 팩2를 설치하는 10가지 이유
웹사이트 분석과 설계 (화면 설계) 학번: 성명: 박준석.
에어 PHP 입문.
4장. 데이터 표현 방식의 이해. 4장. 데이터 표현 방식의 이해 4-1 컴퓨터의 데이터 표현 진법에 대한 이해 n 진수 표현 방식 : n개의 문자를 이용해서 데이터를 표현 그림 4-1.
13주 실습강의 학기, 소프트웨어 설계 및 실험(Ⅰ).
.Net Web Application 2007 컴퓨터공학실험(Ⅰ)
3. 모듈 (5장. 모듈).
함수, 모듈.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
웹과 모바일 홈페이지의 이해와 제작 그리드 레이아웃_웹폼
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
멀티미디어 활용 -플래시 CS3 류 정 남.
Windows XP 서비스 팩2를 설치하는 10가지 이유
About Html5 모바일인터넷과 이수진.
7 생성자 함수.
6 객체.
AJAX? Cho Hyun Min.
BoardGame 보드게임 따라가기.
Presentation transcript:

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의 특징 다양한 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");      

실습 과제