HTML5
HTML5의 개요
HTML5의 정의
월드 와이드 웹(World Wide Web)의 핵심 마크업 언어인 HTML의 5번째 최신 표준 기술
HTML5의 역사
- 2007년 5월: HTML5와 Web Forums 2.0 스펙 채택
- 2007년 11월: HTML5 디자인 원칙 작업 초안
- 2010년 1월: HTML5 Last Call 작업 초안
- 2010년 8월: HTML5 Working Draft 공개
HTML5의 개념과 특징
HTML5의 개념도
HTML5의 주요 특징
| 특징 | 내용 | 시사점 |
|---|---|---|
| Semantics | 보다 구조화되고 다양한 기능의 HTML 태그를 제공 | 보다 지능화되고 다양한 형태의 풍부한 웹 문서 표준 가능 |
| Multimedia | 비디오, 오디오 지원 기능의 자체 지원을 통한 강력한 멀티미디어 기능 제공 | 액티브X와 플래시 같은 별도 외부 플러그인 필요성 제거 |
| Offline & Storage | 네트워크가 지원되지 않는 환경에서도 웹 이용을 가능케하는 오프라인 처리 기능과 로컬 스토리지, DB File, 엑세스 처리 기능 | 웹의 한계로 여겨졌던 네트워크 단절 시 처리 방법과 데이터 저장 기능 문제 해결 |
| 3D, Graphics & Effects | SVG, 캔버스, WebGL 등을 통한 다양한 2차원/3차원 그래픽 기능의 제공 | 외부 플러그인 기능 없이 다양한 2D/3D 그래픽 처리 가능 |
| Device Access | GPS, 카메라, 동작센서 등 디바이스의 하드웨어 기능을 웹에서 직접 제어할 수 있도록 하는 기능 | 웹 기반 디바이스에서 제어 기능을 통해 본격적인 웹 어플리케이션 개발 가능 |
| Performance & Integration | 비동기 통신, 다중 쓰레드 기능 등을 통한 웹에서의 처리 성능을 향상 | 웹의 가장 큰 문제 중 하나였던 성능 문제를 대폭 개선 |
| Connectivity | 클라이언트와 서버 간의 효율적인 통신 기능 제공을 통한 웹 기반 커뮤니케이션 효율 대폭 강화 | 웹에서의 다양한 통신기능(메시징, 응용 간 통신 등) 제공을 통한 응용 개발 범위 확대 |
| CSS3 Styling Effect | 기존 웹 문서의 변경과 성능저하 없이 웹 어플리케이션의 UI(스타일과 효과 등) 기능을 대폭 강화 | UI 측면에서 [[N-스크린]] 서비스 제공 가능 |
HTML5의 주요 기능
| 기능 | 상세 | 설명 |
|---|---|---|
| Web Form | 입력 형태를 보다 다양하게 제공 | |
| Video | 동영상 재생을 위한 API 제공 | |
| Audio | 음성 재생을 위한 API 제공 | |
| Offline Web | 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 애플리케이션 API 제공 | |
| Web Database | 표준 SQL을 사용해 질의할 수 있는 DB 기능 제공 | |
| Web Storage | 웹 애플리케이션에서 데이터를 저장할 수 있는 기능 제공 | |
| Canvas | 2차원 그래픽을 그리기 및 객체에 대한 각종 효과를 주는 기능 제공 | |
| SVG | XML 기반의 2차원 벡터 그래픽을 표현하기 위한 SVG 언어 지원 | |
| Geolocation | 디바이스의 지리적 위치 정보를 얻은 기능 제공 | |
| Web Worker | 웹 애플리케이션을 위한 스레드 기능 제공 | |
| Web Socket | 웹 애플리케이션과 서버간의 양방향 통신 기능 제공 | |
| CSS3 | 웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS3 지원 |
HTML5의 미래 발전 방향
- HTML5 기반 표준 최종 확정 이후에도 지속 발전 중
- 웹 프레임워크를 기반으로 하는 단말 플랫폼을 위한 주요 기업들의 노력
- WoT(Web of Thing) 이니셔티브 출범으로 사물인터넷 영역으로 확대
- Automotive WG를 만들어 커넥티드 카에 필요한 HTML5 API 표준 개발
커뮤니케이션 API
커뮤니케이션 API는 HTML5뿐만 아니라 관련 API에서도 폭넓게 채용되어, 여러 프로그램 간에 비동기 방식으로 메시지를 주고받아 느슨한 결합(Loosely-Coupled) 데이터를 공유할 수 있게 됨. 여기서 말하는 메시지란 JavaScript 객체 혹은 단순 문자열.
MessageEvent 인터페이스
- data: 송신되는 메시지의 내용이 되는 데이터
- origin: 메시지 송신처의 도메인(크로스 도큐먼트 메시징과 Server-Sent Events에서만 사용됨)
- lastEventId: 마지막 이벤트(Server-Sent Events에만 사용됨)
- source: 메시지를 보내는 윈도우 객체(크로스 도큐먼트 메시징에서만 사용됨)
- ports:메시지 송신 시 지정한 포트의 복사본(여러 개)(크로스 도큐먼트 메시징과 채널 메시징에서만 사용됨)