HTML5_pdf.zip



참고자료

'Client Standard > HTML' 카테고리의 다른 글

Web DB  (0) 2013.08.01
Web Storage  (0) 2013.08.01
Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
  • Web DB

   

  • Web SQL DB

   

  • Indexed DB

   

  • Indexed DB Sample Source


   

   

   

   

   

   

   

   

'Client Standard > HTML' 카테고리의 다른 글

[HTML5] HTML5 세미나 PDF 파일  (0) 2013.08.06
Web Storage  (0) 2013.08.01
Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
  • 웹 스토리지


   

   

  • 어디에 활용 가능 한가 ?

   

   

  • Cookie 기술과의 비교

   

   

  • Local Storage

   

   

  • 실습

   

   

'Client Standard > HTML' 카테고리의 다른 글

[HTML5] HTML5 세미나 PDF 파일  (0) 2013.08.06
Web DB  (0) 2013.08.01
Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01

dragstart => ondragstart 속성 => Source 객체에서 처리

dragenter => ondragenter 속성 => Target 객체에서 처리

   

   

dragover => ondragover 속성 => Target 객체에서 처리

drop => ondrop 속성 => Target 객체에서 처리

 

   

   

 

   

   

   

   

   

   

   

  • Drag and Drop (실습)

   

   

'Client Standard > HTML' 카테고리의 다른 글

Web DB  (0) 2013.08.01
Web Storage  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
HTML5의 새로운 요소  (0) 2013.08.01
  • HTML5와 Video

 

   

  • <video> 태그 사용 예제

위 예제는 해당 태그가 삽입된 영역에 320의 너비, 240의 높이의 크기에 맞도록 movie.org라는 Video 파일을 재생할 수 있게 한다

   

   

   

   

  • <video> 태그 속성

   

   

  • 멀티 코덱 파일 대응 예제

   

위의 예제 코드와 같이 <video> 태그 내에 <source> 태그를 삽입하고 재생할 비디오 파일을 src 속성으로, 그에 해당하는 코덱의 타입

type으로 설정하면 <video> 태그를 지원하는 브라우저에서는 문제없이 비디오를 재생할 수 있다.

   

   

  • 비디오 컨트롤러 기능 구현하기

 

   

  • <audio> 태그 속성

 

   

  • 동영상 화면 캡쳐

 

 

 

버튼을 누르면 현재 재생되고 있는 동영상의 화면을 캡쳐 하여 화면에 표시한다

본 실습에서는 동영상이 포함되어 있는 예제 페이지의 <body> 태그 부분이 아래와 같을 때, 화면을 캡쳐하여

<canvas> 태그에 표시할 수 있는 자바스크립트 함수를 구현한다

   

'Client Standard > HTML' 카테고리의 다른 글

Web Storage  (0) 2013.08.01
Drag and Drop  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
HTML5의 새로운 요소  (0) 2013.08.01
[HTML5] Drag and Drop 기능  (0) 2013.07.24
  • HTML Canvas

 

HTML5 Canvas를 이용하면 브라우저의 특정 사각형 영역에 2D 이미지를 그릴 수 있다.

그릴 수 있는 기본 도형은 선, 사각형, 곡선, 원이며 텍스트와 이미지 출력이 가능하다.

   

  • Canvas 로 할 수 있는 일

동적 그래프 그리기

(http://www.benjoffe.com/code/demos/interpolate/)

   

웹 그림판

HTML5 Canvas 기능으로 구성되어 있으며 Windows, Mac OS X, Linux 등 사용자의 OS와 상관없이 작동한다

(http://mugtug.com/sketchpad/)

   

  • 브라우저 지원 현황

(http://caniuse.com/) 참고

   

 

  • <canvas> 태그의 동작 원리

   

   

Canvas 에서 좌표 값의 이해

x : 가로 방향의 시작 위치

y : 세로 방향의 시작 위치

width : 도형의 폭

height : 도형의 높이

숫자의 단위 : pixels

   

  • Canvas 선그리기

   

주어진 좌표를 각 꼭지점으로 하는 삼각형을 그린다.

이를 위하여 아래에 제시된 선 그리기 메소드를 응용 한다.

   

 

   

   

 

   

   

   

   

   

   

   

   

   

   

  • 곡선(Quadratic Curve) 그리기

   

   

 

   

   

 

  • 자동으로 다양한 원을 그리는 애니메이션 구현 (실습)

   

   

   

   

  • Canvas 필터 효과

RGB 값을 조정하여 필터 효과를 줄 수 있다.

   

   

   

위 코드처럼 원본 이미지 데이터를 픽셀 단위로 획득 후, 각 픽셀 r,g,b 값을 증가시켜

더 밝은 색상으로 변경 한다.

'Client Standard > HTML' 카테고리의 다른 글

Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5의 새로운 요소  (0) 2013.08.01
[HTML5] Drag and Drop 기능  (0) 2013.07.24
[HTML5] html5 주저리 주저리...  (0) 2013.07.22

   

   

  • 새롭게 추가된 태그

   

<article> - 내용들의 집합체

<aside> - 오른쪽 배너 레이아웃 구성

<footer> - 하단 레이아웃 구성

<header> - 상단 레이아웃 구성

<nav> - Gnb, Lnb 등의 화면 레이아웃 구성

   

   

   

   

 

  • 새롭게 추가된 멀티미디어 요소

<canvas>

<video>

<audio>

<source>

   

예전의 웹은 그림을 그릴 수 없었다. HTML5에서는 새롭게 추가된 Canvas를 이용해 2D/3D 비트맵 이미지를 그릴 수 있다.

예전의 웹은 자체적으로 Video/Audio를 재생 할 수 없었기 떄문에 표준화 되지 않은 플러그인 형식의 소프트웨어 코덱에 의존 했다.

HTML5에서는 웹 브라우저에 소프트웨어 코덱을 탑재하는 방식을 채택하기 때문에 플러그인 없이

Video/Audio를 재생 할 수 있다.

   

<keygen> - 데이터 암호화 처리

<datalist>

<output>

새로운 <input> type

  • email
  • datetime
  • time
  • datetime-local
  • number
  • range
  • color

   

<section>

<time>외 30개의 새로운 태그 추가됨

(http://w3schools.com/tags/default.asp)

   

   

   

  • HTML5의 문자 집합 선언

HTML 4.01

   

HTML 5

<meta charset="UTF-8" />

 

   

  • <script>, <link> 태그의 type 속성

   

HTML 4.01 : 불필요한 type 속성

   

HTML 5 : type 속성 불필요

   

HTML5에서는 <script>는 항상 JavaScript만을 의미하기 때문에 type 속성을 명시할 필요가 없다.

CSS도, rel="stylesheet"라고 명시하였기 때문에 더 이상 type="text/css" 부분을 선언할 필요가 없다.

   

 

   

  • Figure 요소

   

   

 

  • 따옴표? 대문자? 소문자?

 

 

 

  • <input> 태그 - 필수 입력

   

   

   

  • <input> 태그 - 이메일 주소 입력

   

 

   

  • <input> 태그 - placeholder

   

   

 

  • <input> 태그 - 날짜 date

   

예전에는 달력구현을 JS나 Jquery 로 해야 하는 어려운 작업이었지만 html5에서 추가된

date 타입을 이용하여 쉽게 구현이 가능해 졌다

   

 

 

  • 자동 선택을 지원하는 요소

   

   

   

   

  • 새롭게 추가된 HTML5 JavaScript

   

<canvas> drawing API

<video>, <audio> control API

Local Storage API

Web SQL DB API

Indexed DB API

Geolocation API

Offline web apps API

Web Socket

Web Worker

Drag and Drop API

   

C언어와 Java언어 와 같은 프로그래밍 언어만 있는 것 아니라 이젠 웹 기술에도 적용 된다.

그림을 그리고 데이터베이스를 다루며 파일을 입 출력 하거나 쓰레드를 생성하는 등의 작업을 HTML5기술로 수행하는 것이 가능하다

'Client Standard > HTML' 카테고리의 다른 글

Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
[HTML5] Drag and Drop 기능  (0) 2013.07.24
[HTML5] html5 주저리 주저리...  (0) 2013.07.22

1. Source 객체 : Drag의 대상

2. Target 객체 : Drop의 대상

3. Data 객체 : 전달되는 내용 (객체)


dragstart => ondragstart 속성 => Source 객체에서 처리

dragenter => ondragenter 속성 => Target 객체에서 처리

dragover => ondragover 속성 => Target 객체에서 처리

drop => ondrop 속성 => Target 객체에서 처리


'Client Standard > HTML' 카테고리의 다른 글

Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
HTML5의 새로운 요소  (0) 2013.08.01
[HTML5] html5 주저리 주저리...  (0) 2013.07.22

<script>, <style> 태그 : type 속성 제거


화면 구성을 위한 태그들이 추가 ( 검색 엔진이 태그들만 봐도 분석을 쉽게 할수 있게 추가 )


<header> : 화면 윗단 구성 (nav 구성 가능 - Gnb)

<nav> : 화면 네비게이션 구성 (Lnb)

<section> : 내용 집합

<article> : 각각의 내용 구성

<aside> : 사이드 구성 (우측 배너)

<footer> : 화면 밑단 구성



html4.01

<div>

 <img />

 <span>이미지 설명</span>

</div>


html5

<figure>

 <img />

 <figcaption>이미지 설명</figcaption>

</figure>



<keygen> : 공용키, 개인키 : 암호화 되어서 바로 날라간다.

<input> type : 태그 자체 만으로 달력 구성 


<canvas> drawing API : 화면 그림 그리기

Local Storage API : Client 임시 자동 저장

Web SQL DB API, INdexed DB API : Client 영구 자동 저장

Geolocation API 지도 API

Drag and Drop API : 드래그&드랍 형태 기능 API 




'Client Standard > HTML' 카테고리의 다른 글

Drag and Drop  (0) 2013.08.01
HTML5 Video  (0) 2013.08.01
HTML5 Canvas  (0) 2013.08.01
HTML5의 새로운 요소  (0) 2013.08.01
[HTML5] Drag and Drop 기능  (0) 2013.07.24

+ Recent posts