Html5_SYS4U

웹표준 기술의 대세 Html5

Html5 그냥 대충 알고만 있었나요?

지금부터 집중해서 봐주신다면 Html5에
새롭게 추가된 UI와 여러가지 기능들을
알게 될 것입니다.
“단언컨데 본다는 것은 가장 큰 축복입니다.”

01. Html5 개요
1.1 Html5란?
“Hyper Text Markup Language 5” 의 줄임말로 기존 웹 문서 제작
을 위한 표준 프로그래밍 언어 HTML의 최신 규격입니다.
Active X 나 Flash 또는 실버라이트 없이도 동영상 재생과
그래픽 등을 동일하게 구현할 수 있는것이 특징입니다.

북한은 가난한 나라
이지만 강력한 핵이
있듯이~!!!

01. Html5 개요
Html5의 가장 큰 장점은 “호환성” 이라 할 수 있습니다.
아래에 그림처럼 Html5에 “호환성”은 나날이 발전하고 있습니다.
자료출처 : http://HTML5test.com 자료출처 : http://fmbip.com/litmus

01. Html5 개요
1.2 Html에 역사
-1993년 : HTML 1.0 버전 탄생
-1994년 : HTML 2.0 버전 탄생
-1997년 : HTML 3.0 버전 탄생
-1999년 : HTML 4.01버전 탄생
-2000년 : XHTML 1.0버전 탄생
-2007년 : HTML5 W3C 본격 개발 합류
-2009년 : HTML5 초안 발표
-2014년 : HTML5 권고 예정

어떻게 됐든
흠나 좋군~!!!
예~~~~!!!
자우지 장지지지~

01. Html5 개요
1.3 Html5와 관련 API
Geolocation
일반적으로 HTML5라 불리는 범위
Web
Workers
Data Cache
API
File API
Server-Sent
Events Indexed
Database API
Web SQL
Database
Web
Sockets
Web
Storage
오프라인Canvas
커뮤니케이션
Video&Audio
HTML5
드래그&드롭

01. Html5 개요
1.4 Html5에 추가된 힘
1) 더 풍부한 웹 애플리케이션
2) 더 시맨틱한 마크업
3) 더 높은 접근성
4) 더 높은 효율성

01. Html5 개요
1.4 Html5 추가된 힘
1) 더 풍부한 웹 애플리케이션
- 동영상이나 음성 재생(video&audio 요소)
- 자유로운 2D 그래픽(canvas 요소)
- 오프라인에서도 작동하는 애플리케이션
- 도메인 간의 통신 구현
- Client측 데이터 저장(Web Storage, Web SQL DB 등)
- 백그라운드 처리 수행(Web Workers)
- 서버로부터의 데이터 푸시 & 쌍방향 통신(Web Sockets 등)
- 로컬 파일의 내용을 읽어들임(File API)

01. Html5 개요
2) 더 시맨틱한 마크업
<header> : 해당 문서의 머릿글을 표시하기 위해서 사용합니다. 위의 글처럼 메인 타이틀이 되는 부분들을 여기에
서 활용합니다. 사용할 때에는 제목과 같은 정보만 사용하는게 아니라 간단한 설명을 함께 넣는 것이 좋습니다.
<nav> : 다른 페이지나 현재 페이지의 특정 부분을 나타냅니다. 이동용 링크라고 보면 됩니다. 그렇다고 페이지
내의 모든 링크를 nav 엘리먼트로 만들 필요는 없습니다. 주요 링크를 가진 한 개 블럭 정도만 nav 엘리먼트로 지정
하는게 적절합니다. 페이지 하단의 푸터에 이용약관, 홈페이지, 저작권 등의 링크를 가진 경우가 있는데 이때에는
nav보다 footer 엘리먼트 사용이 적절합니다.
<section> : 문서나 애플리케이션의 섹션(절)을 나타냅니다. 섹션은 컨텐츠를 연관된 내용으로 묶은 형태로, 소제목
과 함께 표시하는 경우가 대부분입니다. 책의 장Chapter이나 대화상자에서 탭으로 구성된 각 페이지 혹은 논문에서
번호로 구분된 절을 생각하면 됩니다. 웹 사이트의 홈페이지는 소개나 새로운 소식 혹은 연락처처럼 각기 다른 섹션
의 모음일 수 있습니다.
<article> : 문서, 페이지, 사이트 등에서 하나의 독립된 요소로 따로 떼어내어 사용할 수 있는 내용이라 생각하면
됩니다. 포럼에 올라온 글이나 잡지와 신문 기사, 블로그와 사용자의 댓글, 그리고 위젯과 가젯 등과 같이 하나의 독립
된 컨텐츠에 이 엘리먼트를 사용할 수 있습니다.

<hgroup> : 섹션(절)의 주제를 나타냅니다. 이 부분이 부제나 별도 제목 혹은 주제의 주요 구절 등 여러 항목으로
구성된 경우 이 엘리먼트 내부에서 h1-h6 엘리먼트를 사용해 표시합니다.
<aside> : 현재 문서의 컨텐츠와 큰 관련이 없는 부분을 보여줄 때 사용합니다. 출판물에서 주요 기사 옆에 곁들
이는 관련 기사처럼 표시합니다. 인쇄물에서처럼 인용 부호를 사용하거나 광고를 붙이기도 하고 여러 nav 엘리먼트
를 포함하거나 현재 페이지 내용과 다른 컨텐츠를 노출할 때 사용할 만한 엘리먼트 입니다.
<time> : 24시간제로 시각을 표시하거나 그레고리력으로 날짜를 표시하는데 부가적으로 시각과 표준시간대와
의 차이도 추가할 수 있습니다.
<mark> : 참조용으로 문서 내 이동을 돕는 엘리먼트 입니다.
<figure> : 그림, 사진, 일러스트 등의 컨텐츠에 연관된 캡션을 표시할때 사용할 수 있는 내용이라 생각하면 됩니
다. figcaption 엘리먼트를 사용해 연관된 캡션을 표시합니다.
<footer> : 바로 위 섹션의 컨텐츠나 최상위 섹션에 대한 풋터를 제공합니다. footer 는 통상 작성자, 관련문서에
대한 링크, 저작권 표시 등 섹션에 대한 정보를 갖습니다. 대부분의 footer가 섹션 끝에 나타나긴 하지만 필수사항은
아닙니다. footer 엘리먼트가 섹션 전체를 포함하는 경우 부록, 색인, 출판사 정보, 라이선스 권한 등을 표시합니다.

01. Html5 개요
Html
마크업
Html5
마크업
<div id=“nav”>
<div id=“footer”>
<div id=“aside”>
<div id=“header”>
<div id=“section”>
<div id=“article”>
<nav>
<footer>
<aside>
<header>
<article>
<section>
<article>

01. Html5 개요
자료출처 : http://www.yanolja.com

01. Html5 개요
3) 더 높은 접근성
-접근성이란? 장애가 있는 사람들에게 생활을 둘러싼 여러 가지 사물을
이용할 수 있도록 돕는다는 개념입니다.
- 컴퓨터의 경우 문서나 애플리케이션의 사용의 편의성
예) 시각장애자의 경우 음성브라우저 이용 웹 컨텐츠 이용. 쉬운자막제공 키보드
사용의 보장 등
-header, footer, section 등 프로그램이 문서구조 이해
-HTML5는 WAI-ARIA(Web Accessibility Initiative – Accessible Rich
Internet Application)라는 접근성 향상을 목표로 한 사양 포함하고 있습니다.
-WAI-ARIA는 장애가 있는 사람들이 보다 쉽게 웹 컨텐츠와 애플리케이션을
사용할 수 있도록하는 기술에 대한 정의서입니다.

01. Html5 개요
4) 더 높은 호환성
- 버전 간 호환성
- 후방 호환성
: 기존 HTML로 작성된 문서가 HTML5 지원 브라우저에서도 제
대로 표시되는 것
- 전방 호환성
: HTML5를 지원하지 않는 브라우저에서도 HTML5 문서 사용 가능
- 브라우저 간 호환성
- 완전한 상호 호환을 이루고자 상세한 사양 기술
- 이미 사용되고 있는 내용에서 사양 추출

01. Html5 개요
1.5 HTML5와 XHTML
HTML5는 여러가지 사양을 하나로 정리!!!
HTML4.01
XHTML1.0
DOM HTML
DOM HTML
HTML5 XHTML5
HTML5

01. Html5 개요
1.5 HTML5와 XHTML
Xhtml이란?
“Extensible Hypertext Markup Language”의 줄임말로
간단하게 정의해 Html 태그 자체를 Xml화 해서 보여주는 것을 Xhtml이라고
합니다.
Xml은 Html보다도 엄격한 문법을 가지고 있으며 텍스트 데이터를 구조화 하고
정해진 규칙안에서 재정의해 사용할 수 있습니다. 쉽게 말해 Html은 브라우져
에 보여주기 위한 거라면 Xhtml은 데이터를 주고 받기위함이다 라고 생각하시
면 될 거 같습니다.
Html5로 코딩시 Html로 기술 할 것인지 Xhtml로 기술할 것인지 선택 할 수 있
습니다.

02. Html5의 시작
2.1 기본 문서 구조
문서 타입이란 이 문서에 대해서 HTML의 버전이나 언어와 같은 요소를 사전에 정의해
서 문서를 쉽게 읽어드리게 하는 요소로 제공 됩니다.
Html5에 문서의 타입은 간단합니다. Html 문서의 최상단에 <!DOCTYPE html>
이 코드 한 줄만 적어주면 됩니다.(기존의 doctype은 SGML 기반이었기 때문에 DTD를
명시해야 했으나, Html5에서는 브라우저가 표준모드로 작동되게 하는 역할만 하면 되기
때문에 아주 간소화해 졌습니다.)
문서의 캐릭터셋을 선언합니다. 문서의 캐릭터셋도 간단해 졌습니다. <head>영역에 다
음과 같이 <meta charset=“utf-8”/> 메타 태그를 적어주면 됩니다.
DTD은 “document type definition”의 약자로 문서 텍스트의 구조를 SGML 구문을 사
용하여 정의 및 기술한 것입니다.
SGML은 “standard generalized makeup language”의 약자로 표준 문서 작성 언
어, 표준화된 범용 표시 언어입니다.

02. Html5의 시작
2.1 기본 문서 구조
DOCTYPE : 웹 페이지를 올바르게 처리하기 위해 선언하는 문서유형입니다.
DOCTYPE은 Html4, Xhtml, Html5에 따라 표현하는게 달라집니다.
Strict : 웹 표준을 엄격하게 지킨다는 의미입니다. Center, font
를 포함한 14가지 엘리먼트를 사용하지 않습니다.
Transitional : strict에 비해 범위를 넓게 허락해 줍니다. 그다지
엄격하지 않으며 국내 환경에 적합합니다. Frameset, frame만
제외합니다.
Frameset : Frameset태그의 사용이 허용됩니다. Html레벨의
프레임셋 사용

02. Html5의 시작
2.2 추가된 태그

02. Html5의 시작
2.3 사라진 태그

02. Html5의 시작
2.4 변경된 태그

02. Html5에 새로운 기능
3.1 Video & Audio
Html5를 지원하는 브라우저는 비디오, 오디오와 같은 멀티미디어 형식을 플러그
인 없이 자체적으로 지원합니다. Html5는 이러한 멀티미디어 파일을 웹 페이지
에 삽입할 수 있는 태그를 정의하고 있으며 재생과 관련한 각종 제어를 수행할 수
있는 스크립트 API가 제공됩니다.

3.1 Video & Audio
video 태그
속성

3.1 Video & Audio
<사용되고 있는 태그>
<video width="300" height="205“ poster=“video.png” controls>
<source type="video/mp4" src="video.mp4">
<source type="video/ogg" src="video.ogg">
<source type="video/webm" src="video.webm">
Video 태그가 지원되지 않는 브라우저 입니다.
</video>
http://www.w3.org/2010/05/video/mediaevents.html
Video

3.1 Video & Audio
<브라우져 지원 현황>
Video
자료출처 : http://fmbip.com/litmus

3.1 Video & Audio
Audio 태그
속성

3.1 Video & Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_
all
Audio

3.1 Video & Audio
Audio

Video & Audio 정리 및 접근성
※ Audio, Video 요소는 결국 모든 브라우저에서 지원 되어야 합니다.
1. 기존의 경우 플러그인 기반의 플레이어가 많이 사용되고 있습니다.
2. 플러그인 기반의 미디어 재생기는 플러그인과 제작된 웹 어플리케이션 모두
가 접근성을 지켜야하므로 어려움이 존재합니다.
3. Html5의 경우 별도의 플러그인 기반 웹 어플리케이션을 쓰지 않으므로 잠재
적으로 접근성이 크게 향상됨을 기대 할 수 있습니다.
4. 각 브라우저 밴더들이 브라우저 개발시 Html5지원을 하기위해 많은 노력을
진행하고 있으므로 상황은 점점 좋아질거라 생각됩니다.
※ Html5의 미디어 관련 요소와 접근성의 관계에 대해…
1. 쉬운 자막 제공을 하고 있습니다.
2. 키보드 사용의 보장 등이 있습니다.

3.2 Canvas
Html5 에 처음 도입된 것으로 종이에 그림을 그리듯 화면위에 도형이나 직선을
편리하게 그리기 위해 만들어졌습니다.
canvas 는 2D에 효과를 낼수 있으며 여기에 스크립트와 CSS를 더하면 3D로도
효과를 낼수 있습니다.
참고로 <canvas>태그는 그 자체가 그래픽이 아니라 그래픽이 그려질 영역 이라
고 생각하시면 됩니다.

3.2 Canvas
<canvas id=“canvas1" width="200" height="100"
Your browser does not support the HTML5 canvas tag.</canvas> (영역)
<script>
var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
http://www.html5canvastutorials.com/

3.2 Canvas

3.3 Form 요소
Form은 서버에 사용자 입력 값을 전송하는 역할을 담당하는 요소입니다.
Html5에서 Form 요소는 Form Control을 Form요소 안에 마크업 하지 않아도
관련된 Form 요소와 연결(id값으로 연결)할 수 있도록 신규 속성이 추가 되었으
며, Form Control들을 식별할 수 있도록 Label요소와 Title속성등 레이블을 제
공하여, 어떤 데이터를 입력하는 영역인지 알 수 있도록 웹 접근성과 사용성을 향
상 시켰습니다.
<form 속성> 폼안에 있는 데이터를 서버로 전송
method - get,post 방식지정
name - 폼이름
action - 이동할 위치
enctype - 대용량파일의 속성(multipart, form-data)

3.3 Form 요소
※기존에 존재하던 input 요소의 type 속성 값의 종류

3.3 Form 요소
※ 서버로 보내
질 기존 Form
요소 및 Input
Type(코드)

3.3 Form 요소
※상단 코드 출력시 화면

3.3 Form 요소
※Html5에 새롭게 추가된 input 요소의 type 속성 값의 종류

3.3 Form 요소
※ Html5에 추가된
Input Type

3.3 Form 요소
※ 기존 폼 관련 요소(태그)
fieldset , label, button, select, optgroup, textarea
※ Html5에 추가된 폼 관련 요소(태그)
datalist, output, keygen, progress, meter

< Html5에서 사용되고 있는 태그>

※ 상단 태그를 출력하
게되면 나타는 화면
입니다.

Form Inputs 브라우져 지원 현황

Form 속성 브라우져 지원 현황

3.4 Drag & Drop
Html5에서는 Drag & Drop을 위한 API가 제공됩니다. 기존의 자바스크립트의
마우스 관련 이벤트와는 관련이 없으며 Drag 대상, Drop대상, 이동 컨텐츠 등의
정보를 기반으로 동작합니다. 또한 웹 페이지 내의 컨텐츠의 이동 뿐만이 아니라
웹 페이지 간, 웹 페이지와 다른 응용프로그램 간의 Drag & Drop이 가능합니다.

3.4 Drag & Drop
드래그가 시작되는 시작자 요소에 의해 전달되는 이벤트는 다음과 같습니다.

3.4 Drag & Drop
지금 보시는 건 드래그가
시작되는 순간입니다.

3.4 Drag & Drop
드래그 대상에 의해 전달되는 이벤트는 다음과 같습니다.

3.4 Drag & Drop
지금 보시는 건 드래그 대
상이 전달되는 순간입니
다.

3.4 Drag & Drop
드래그 이벤트 객체의 가장 중요한 속성은 드래그되는 데이터가 포함되는 data
Transfer입니다. dataTransfer 객체에는 다음과 같은 속성 및 메서드가 들어
있습니다.

3.4 Drag & Drop
Html에 끌어 놓기 이벤트의 dataTransfer 객체와 함께 사용할 수 있는 MIME
유형은 다음과 같습니다.

3.4 Drag & Drop
드래그 동작의 시작자는 dragstart 이벤트의 핸들러에서 dataTransfer,
effectAllowed 속성을 설정하여 허용되는 드래그 효과를 제한할 수 있습니다. 다음과 같
은 문자열 값이 사용될 수 있습니다.

3.4 Drag & Drop
dragover 및 dragenter 이벤트에 대한 핸들러에서 dropEffect 값을 설정합니
다.(copy , copyMove 드래그 효과 사용)
https://www.ibm.com/developerworks/community/blogs/bobleah/ent
ry/html5_an_example_of_drag_and_drop26?lang=en

04. Html5 More…
4.1 그밖에 새로운 기능(API)
1) 오프라인 웹 구현을 위한 API
- Web Storage : key/value 형태의 간단한 데이터 저장을 위한 저장공간
- IndexedDB : 구조적인 데이터 저장을 위한 데이터베이스 시스템
- Application Cache : 리소스를 캐싱하여 오프라인 상태에서도 웹 애플리케이션을
사용할 수 있는 캐싱 시스템
2) 실시간 / 커뮤니케이션 API
- Web Workers : 백그라운드 프로세서
- Web Socket : WebSocket 프로토콜을 이용하여 서버와 통신하며 서버로부터 push
서비스가 가능한 API
- Notifications : 운영체제 수준의 알림 서비스
- MessageEvent 인터페이스를 이용하여 메시지를 비동기로 송수신

04. Html5 More…
4.1 그밖에 새로운 기능(API)
3) 파일 / 하드웨어 접근 API
- File API : 로컬 파일 시스템의 파일에 접근하여 파일의 정보를 확인하거나 파일의
내용을 확인할 수 있는 기능
- Geolocation : GPS, 셀, 네트워크 등의 정보를 이용하여 디바이스의 현재 위치를
파악할 수 있는 기능
- Device Orientation : 디바이스의 기울기, 방향, 등을 확인 할 수 있는 기능
- Speech Input : 마이크로부터 음성을 입력 받아 문자로 전환해주는 기능

04. Html5 More…
4.2 Html5 각종 사이트
1. Html5를 사용하고 있는 사이트 http://html5gallery.com/
2. Html5 Element Index를 볼 수 있는 사이트 http://html5doctor.com/
3. 구글이 만든 Html5 가이드 http://www.html5rocks.com/
4. Html5 각종 API 예제 http://html5demos.com
5. W3c Html5 spec 한글 번역본 http://html5.clearboth.org/spec.html
6. slide로 보는 Html5 http://slides.html5rocks.com/#landing-slide

그리고 여기서 한가지 CSS3에 대해 궁금하시나요?

최홍만에 핵꿀밤처럼 한방에 CSS3 알아보기
http://html5.firejune.com/css3.html#slide7

Html5_SYS4U

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Html5_SYS4U

Similar to Html5_SYS4U (20)

More from sys4u

More from sys4u (14)

Html5_SYS4U