HTML5의 새로운 요소

   

   

• 새롭게 추가된 태그

   

<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기술로 수행하는 것이 가능하다