1. HTML 5
ㅇ 2014년10월 표준안 확정 발표된 이래로,
ㅇ WHATWG에서, 웹 어플리케이션 1.0 이라는 명칭으로, 계속 개발되고 반영되고 있음
- 즉, 규격 자체가 바뀌면서 진화중 임
2. HTML 5의 주요 특징
ㅇ 기존 HTML 버전들과는 달리, SGML에 기반을 두지 않음
ㅇ HTML 5는, 간단명료하게,
- 맨처음에, <!DOCTYPE html>
으로 시작 (심지어 이 없이도 유효한 HTML 5로써 사용 가능)
ㅇ 시각적 효과 이외에도 의미적인 문서의 구조화 도모
- 例) header 요소, section 요소, article 요소 등 지원
ㅇ 그래픽,동영상,음악 등을 위한 웹 어플리케이션의 구현 가능 플랫폼
- 따로 별도의 플러그인(플래시,Silverlight 등) 없이도, 다양한 멀티미디어 감상 가능
- 例) audio 요소, video 요소, canvas 요소 등
ㅇ HTML5 API 제공 (for Javascript)
- 기존 HTML과는 달리, 규격화된 웹 응용 서비스들의 모음
. 例) 웹 폼, 비디오/오디오, 캔버스, SVG, 위치정보, 웹 DB, 웹 소켓 등의 API 제공
ㅇ 한편, 기존 HTML에서 지원이 중단된(퇴화된) HTML 구성 요소 및 속성들
- 지원 중단 요소들 例)
. acronym, applet, basefont, big, center, dir, font, frame, frameset, noframes,
strike, tt, u 등
- 지원 중단된 속성들 例)
. a 요소의 name 속성, img 요소의 border/hspace/vspace 속성, ul 요소의 type 속성 등
3. HTML 5의 API 이란?
ㅇ 웹 개발자가, 웹 애플리케이션을 쉽게 구축케 하는, 인터페이스, 프로토콜, 도구의 집합
- 다양한 기능과 상호작용할 수 있는 표준화된 방법을 제공
. 例) DOM 조작, 장치 내 하드웨어,소프트웨어 기능에 접근, 네트워크 요청 수행 등의 기능
ㅇ 주로, 자바스크립트로 호출, 제어되는 API
- 웹브라우저가 지원하는 외부 객체 형태로 제공되며,
. 해당 API 객체의 속성들과 메소드들을 통해 이용 가능
ㅇ 단, 이미지,오디오,비디오 데이터들은,
- html 문서 내 해당 요소로의 직접 접근도 가능
. 즉, API 없이도 (audio 요소, video 요소, svg 요소 등)로도 가능
ㅇ 장점
- 플러그인 없이도, 다양한 API를 활용하여, 복잡한 기능의 웹 애플리케이션 개발이 가능
- 풍부하고 다채롭게 만들어주는 다양한 기능 제공
ㅇ 주요 종류
- Geolocation API, Canvas API, Web Storage API, Web Socket API, File API, History API,
Drag and Drop API, Audio 및 Video API, Notification API, IndexedDB API, Web Worker API,
Fetch API, Service Worker API, Battery Status API, Vibration API, WebRTC API,
Device Orientation API, Fullscreen API, Gamepad API 등
3. HTML 5의 주요 API들
ㅇ Geolocation
- 웹브라우저 사용자의 위치를 알아냄
- 웹브라우저 BOM 객체인 navigator.geolocation 객체를 통해 제공됨
ㅇ 히스토리 관리 (History API)
- window.history.pushState(state, title, url)
- window.history.replaceState(state, title, url)
. state : 후에 사용할 수 있도록, 현재 상태를 기록해 두는 객체
.. 후에 history.state로 불러올 수 있음
. title : 웹브라우저 상단 타이틀
. url : URL 문자열
- window.onpopstate : 뒤로가기나 앞으로가기를 했을 때, 이벤트 발생
- window.history.state : popstate 이벤트 발생 후,
history.state에 접근하여 이전 state를 가져옴
ㅇ 교차 출처 간 메세지 전달
- 서로 다른 출처의 문서 사이에 메세지를 전달할 수 있게 하는 기능
ㅇ Canvas (캔버스)
- 웹페이지 내 자바스크립트로 프로그래밍이 가능한 그림 화폭 API
. SVG와 유사하게 웹페이지 내 동적인 그래픽 처리 요소를 만들 수 있으나,
. 벡터 그래픽 형식이고 XML로 정의되는 SVG와는 달리,
. 픽셀 단위로 이미지 정보를 처리하고, 이를 자바스크립트로 읽도록 함
ㅇ Web Storage
- 웹브라우저의 내부 스토리지 구현
ㅇ Blob 객체
- 대용량 이진 데이터를 다루는 기능
ㅇ File 객체
- 로컬 파일을 참조하는(읽고 쓰는) 기능
ㅇ Drag and Drop API
- HTML 요소 또는 로컬 파일을, 마우스로 끌어 다른 요소로 이동시킬 수 있는 데이터 전달 기능
ㅇ Web Worker
- 여러 프로그램을 멀티스레드로 병렬 처리할 수 있게하는 기능
ㅇ Indexed Database
- 로컬에 키-값(key-value) 쌍 타입의 관계형 데이터베이스 기능
ㅇ Web Socket
- 서버와의 양방향 통신 제공 기능
. 송수신 간에 양방향 연결 확립 필요
. 서버/클라인언트 간에 일대일 통신 수행
. 프레임 단위 전송