HTML5의 개요
1. HTML5 변천사
- HTML3.2 -> HTML4.01 -> XHTML1.0 -> HTML5
2. HTML Elements
2.1. 섹션(구조) 정의 요소
<section>: 문서의 특정 영역을 구분
<header>: 문서 또는 영역의 머리말에 해당하는 내용 구분
<footer>: 문서 또는 영역의 꼬리말에 해당하는 내용 구분
<nav>: 다른 페이지를 가리키는 링크들의 모음(네비게이션) 구분
<article>: 하나의 글 또는 기사(본문)의 단위 구분
<hgroup> : 태그에서는 h1-h6태그를 사용하고 subheading, 대체제목, line으로 구분할때 사용되어짐
<aside>: 본문의 흐름에서 벗어나는 내용 구분(참고, 팁, 사이드바, 인용)
2.2. 콘텐츠 삽입 요소
<figure>: 이미지, 비디오 등에 자막(캡션) 표현
<source> : codec의 지원이나 media type에 기초하여 브라우져가 선택하게 하여 video와 audio파일을 거기에 맞게 대체시켜 줌
<video>: 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시(UI API 제공)
예) <video src="myVideo.ogg"></video>
<audio>: 별도의 플러그인 설치를 필요로 하지 않는 음원 자료를 표시(UI API 제공)
예) <audio src="myAudio.ogg" controls="controls">
<canvas> : 그래프나 게임 같은 동적인 비트맵 그래픽 표시하는데 사용
예)
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var defineContext = canvas.getContext('2d');
}
}
</script>
<embed> : 플러그인 컨텐츠 표시할 때 사용
2.3. Form 요소
<datalist> :
<keygen> : 키의 페어를 생성하기 위한 컨트롤을 나타냄
<output> : 스크립트에 의한 계산 결과 등 어떠한 출력 결과를 나타냄
2.4. 인터렉티브(상호작용) 요소
<dialog>: 사람 간에 일어난 대화 영역 구분
<details>: 추가적인 상세정보를 담고있는 영역(툴팁의 내용)
<datagrid>: 동적인 데이터를 효과적으로 표현(트리, 목록, 표)
<menu>, <command>: menu는 command 요소를 포함하여 즉각적인 동작 발생(콘텍스트 메뉴)
<command> : 사용자가 실행할 수 있는 명령어를 표시하는데 사용
2.5. 텍스트레벨 요소
<mark>: 강조할 필요까진 없으나 주목해야 할 문구를 표현(형광펜)
<meter>: 특정한 범위에 속하는 숫자 값을 표현(월급, 득표율, 테스트 점수 등)
<time>: 특정한 시각을 표현
<progress>: 현재 진행 중인 상태를 표현(다운로드 완료율)
<ruby/rt/rp> : 루비를 마크업함
3. HTML5 Attributes
3.1. input type
- text, password, hidden, file 같은 제한적인 사용을 하며 필요한 부분은 스크립트로 제어해왔는데 좀더 다양해짐
. tel : 전화번호
. search : 검색 박스
. url : 웹 주소
. email : 이메일 주소
. datetime : 정확하고 절대시간 지정
. date : 날짜 pickers
. month : 잘 표시
. week : 주표시
. time : timestamps
. datetime-local : 로컬의 날짜와 시간
. number : 숫자(spinbox)
. range : 슬라이더
. color : 색깔 pickers
3.2 Form Controls
- form을 동적으로 콘틀로할 수 있게 됨
. required : 사용자들은 빈필드로 submit할 수 없음
. placeholder : input내에 text를 보여주거나 focus가 활성화 되면 필드를 공백으로 만들어 주고, focus가 되지 않았을때는 기본적으로 입력된 내용이 보여지게 함
. autofocus : 특정 input태그에 focus를 이동시키지만, script가 아닌 마크업이기때문에 모든 웹사이트에서 동일한 동작을 함
. autocomplete : 자동 완성 데이터 저장
. novalidate : form 요소에는 폼을 제출할 때 유효성 검증을 거치지 않도록 함
. list : datalist와 select와 함께 사용할 수 있음
. pattern :정규표현식으로 체크 가능
3.3. html
- manifest : 응용 프로그램은 저장을 위한 캐쉬와 데이타 추출을 위한 manifest를 가짐, 어플리케이션 캐싱과 관련됨
4. HTML5 Features
- Web workers : HTML4 지원 브라우저의 자바스크립트는 단일 프로세스로 순차적으로 동작하는데 반해 HTML5는 다중 쓰레딩 지원(단일 프로세스로 순차적으로 동작함을 극복한 동시에 다양한 어플리케이션을 실행가능하게 함)
예) var worker = new Worker('js/worker.js'); worker.onmessage = function(event) {console.log('Result: ' + event.data);}
- Web Database : 자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API며, 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 줌
예) var dbase = window.openDatabase("Test", "1.0", "Sample DB", 90000);
- Web Storage : 업체별 로컬 스토리지기술을 표준화함(IE의 userData, FF의 Dom Storage, Flash의 Local Shared Object, Google Gear), Session Storage와 Local Storage 를 제공함
- Web Socket : 한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API를 제공함
- Geolocation API : 위치 정보(GPS/WiFi/3G based location)를 브라우저에서 Script API를 통해 제공받을 수 있음(위치 정보 : 위도, 경도, 높이, 정확도, 진행방향, 진행속도)
예) navigator.geolocation.getCurrentPosition(function(position);
- Drag & Drop API : 쉬운 Drag & Drop 지원
- Application cache : App Cache는 원하는 리소스를 오프라인으로 선언하면 되고 CACHE MANIFEST로 선언후 cache.manifest 파일에 내용을 적으면 됨
- Cross-document messaging : 서로 다른 도메인간의 메세지를 주고 받을 수 있음(보안 이슈 발생 가능성 존재)
- Microdata : itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 함
- HTML-RDFa : Microdata와 함께 마크업언어에 의미 정보 표현이 가능해 시맨틱웹의 기반 표준이 될 것임
5. 데모 사이트
- HTML 5 Demos and Examples
- HTML5 Gallery
- HTML3.2 -> HTML4.01 -> XHTML1.0 -> HTML5
2. HTML Elements
2.1. 섹션(구조) 정의 요소
<section>: 문서의 특정 영역을 구분
<header>: 문서 또는 영역의 머리말에 해당하는 내용 구분
<footer>: 문서 또는 영역의 꼬리말에 해당하는 내용 구분
<nav>: 다른 페이지를 가리키는 링크들의 모음(네비게이션) 구분
<article>: 하나의 글 또는 기사(본문)의 단위 구분
<hgroup> : 태그에서는 h1-h6태그를 사용하고 subheading, 대체제목, line으로 구분할때 사용되어짐
<aside>: 본문의 흐름에서 벗어나는 내용 구분(참고, 팁, 사이드바, 인용)
2.2. 콘텐츠 삽입 요소
<figure>: 이미지, 비디오 등에 자막(캡션) 표현
<source> : codec의 지원이나 media type에 기초하여 브라우져가 선택하게 하여 video와 audio파일을 거기에 맞게 대체시켜 줌
<video>: 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시(UI API 제공)
예) <video src="myVideo.ogg"></video>
<audio>: 별도의 플러그인 설치를 필요로 하지 않는 음원 자료를 표시(UI API 제공)
예) <audio src="myAudio.ogg" controls="controls">
<canvas> : 그래프나 게임 같은 동적인 비트맵 그래픽 표시하는데 사용
예)
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var defineContext = canvas.getContext('2d');
}
}
</script>
<embed> : 플러그인 컨텐츠 표시할 때 사용
2.3. Form 요소
<datalist> :
<keygen> : 키의 페어를 생성하기 위한 컨트롤을 나타냄
<output> : 스크립트에 의한 계산 결과 등 어떠한 출력 결과를 나타냄
2.4. 인터렉티브(상호작용) 요소
<dialog>: 사람 간에 일어난 대화 영역 구분
<details>: 추가적인 상세정보를 담고있는 영역(툴팁의 내용)
<datagrid>: 동적인 데이터를 효과적으로 표현(트리, 목록, 표)
<menu>, <command>: menu는 command 요소를 포함하여 즉각적인 동작 발생(콘텍스트 메뉴)
<command> : 사용자가 실행할 수 있는 명령어를 표시하는데 사용
2.5. 텍스트레벨 요소
<mark>: 강조할 필요까진 없으나 주목해야 할 문구를 표현(형광펜)
<meter>: 특정한 범위에 속하는 숫자 값을 표현(월급, 득표율, 테스트 점수 등)
<time>: 특정한 시각을 표현
<progress>: 현재 진행 중인 상태를 표현(다운로드 완료율)
<ruby/rt/rp> : 루비를 마크업함
3. HTML5 Attributes
3.1. input type
- text, password, hidden, file 같은 제한적인 사용을 하며 필요한 부분은 스크립트로 제어해왔는데 좀더 다양해짐
. tel : 전화번호
. search : 검색 박스
. url : 웹 주소
. email : 이메일 주소
. datetime : 정확하고 절대시간 지정
. date : 날짜 pickers
. month : 잘 표시
. week : 주표시
. time : timestamps
. datetime-local : 로컬의 날짜와 시간
. number : 숫자(spinbox)
. range : 슬라이더
. color : 색깔 pickers
3.2 Form Controls
- form을 동적으로 콘틀로할 수 있게 됨
. required : 사용자들은 빈필드로 submit할 수 없음
. placeholder : input내에 text를 보여주거나 focus가 활성화 되면 필드를 공백으로 만들어 주고, focus가 되지 않았을때는 기본적으로 입력된 내용이 보여지게 함
. autofocus : 특정 input태그에 focus를 이동시키지만, script가 아닌 마크업이기때문에 모든 웹사이트에서 동일한 동작을 함
. autocomplete : 자동 완성 데이터 저장
. novalidate : form 요소에는 폼을 제출할 때 유효성 검증을 거치지 않도록 함
. list : datalist와 select와 함께 사용할 수 있음
. pattern :정규표현식으로 체크 가능
3.3. html
- manifest : 응용 프로그램은 저장을 위한 캐쉬와 데이타 추출을 위한 manifest를 가짐, 어플리케이션 캐싱과 관련됨
4. HTML5 Features
- Web workers : HTML4 지원 브라우저의 자바스크립트는 단일 프로세스로 순차적으로 동작하는데 반해 HTML5는 다중 쓰레딩 지원(단일 프로세스로 순차적으로 동작함을 극복한 동시에 다양한 어플리케이션을 실행가능하게 함)
예) var worker = new Worker('js/worker.js'); worker.onmessage = function(event) {console.log('Result: ' + event.data);}
- Web Database : 자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API며, 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 줌
예) var dbase = window.openDatabase("Test", "1.0", "Sample DB", 90000);
- Web Storage : 업체별 로컬 스토리지기술을 표준화함(IE의 userData, FF의 Dom Storage, Flash의 Local Shared Object, Google Gear), Session Storage와 Local Storage 를 제공함
- Web Socket : 한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API를 제공함
- Geolocation API : 위치 정보(GPS/WiFi/3G based location)를 브라우저에서 Script API를 통해 제공받을 수 있음(위치 정보 : 위도, 경도, 높이, 정확도, 진행방향, 진행속도)
예) navigator.geolocation.getCurrentPosition(function(position);
- Drag & Drop API : 쉬운 Drag & Drop 지원
- Application cache : App Cache는 원하는 리소스를 오프라인으로 선언하면 되고 CACHE MANIFEST로 선언후 cache.manifest 파일에 내용을 적으면 됨
- Cross-document messaging : 서로 다른 도메인간의 메세지를 주고 받을 수 있음(보안 이슈 발생 가능성 존재)
- Microdata : itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 함
- HTML-RDFa : Microdata와 함께 마크업언어에 의미 정보 표현이 가능해 시맨틱웹의 기반 표준이 될 것임
5. 데모 사이트
- HTML 5 Demos and Examples
- HTML5 Gallery