'Client Standard/HTML' 카테고리의 글 목록

참고자료

'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 등의 화면 레이아웃 구성

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

<video>

<audio>

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

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

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

Video/Audio를 재생 할 수 있다.

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

새로운 <input> type

email
datetime
time
datetime-local
number
range
color

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

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

HTML5의 문자 집합 선언

HTML 4.01

HTML 5

<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

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

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

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

<section> : 내용 집합

<article> : 각각의 내용 구성

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

<footer> : 화면 밑단 구성

html4.01

<div>

<img />

</div>

html5

<img />

</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

dBack