HTML5의 기능
HTML5의 전체 기능은 크게 두 부분으로 나눌 수 있다.
- 웹 문서 작성을 위한 HTML 태그 셋
- 웹 애플리케이션 작성을 위한 API
HTML5는 이전 HTML 태그를 계승하였지만, 문서의 모양을 표현하는 HTML 태그와 속성들은 과감히 청산하였다. 그리고 문서의 구조를 명확히 표현하는 시맨틱 태그를 추가하였다.
또 다른것으로, HTML5의 출현은 웹 문서의 시대에서 웹 애플리케이션의 시대로의 변화를 뜻한다. 그것은 기존 HTML이 웹 문서를 만들기 위한 언어 역할밖에 할 수 없었지만, HTML5는 나아가 웹 브라우저상에서 플러그인의 도움 없이 웹 애플리케이션을 만들 수 있는 언어이면서 플랫폼을 갖추었다는 뜻이다. 이를위해, HTML 웹 브라우저는 웹 애플리케이션을 개발할 수 있는 자바스크립트 API(Application Programming Interface)를 표준화하였다. 자바스크립트 API(간단히 API)는 HTML5 표준을 갖춘 어떤 웹 브라우저에서도 지원되므로, 웹 개발자들은 API를 이용하여 자바스크립트 프로그램을 작성하기만 하면 된다.
HTML5의 세부 기능 간단 정리
웹 폼 (Web Form)
- 사용자로부터 입력을 받기 위한 다양한 HTML태그와 속성을 제공한다.
오디오, 비디오 (Audio/Video)
- 오디오나 비디오를 재생하는 HTML 태그를 지원하며, 별도의 플러그인 설치 없이 재생이 가능하다. 또한 자바스크립트 코드를 이용하여 오디오, 비디오의 재생, 중지 등을 제어할 수 있다. 세계적인 비디오 스트리밍 기업인 넷플릭스(Netflix)는 이미 HTML5로 비디오 스트리밍 서비스를 제공하고 있다.
캔버스 (Canvas)
- Canvas는 <canvas> 태그와 자바스크립트를 이용하여 웹 브라우저상에서 동적으로 2, 3차원 그래픽을 그릴 수 있는 API이다. 이 기능을 이용하면 차트, 애니메이션, 게임 등 GUI 기반의 웹 애플리케이션을 만들 수 있다.
SVG (Scalable Vector Graphics)
- XML로 표현하는 2차원 벡터로 그래픽을 그리는 API이다.
웹 스토리지 (Web Storage)
- 웹 스토리지는 웹 브라우저가 실행되는 로컬 컴퓨터에 데이터를 저장하는 API이다. 이 기능으로 쇼핑몰, 게임 등에서 발생하는 데이터를 사용자 컴퓨터에 저장하여 웹의 성능을 높이거나 웹 서버와 연결되지 않은 상황(off-line)에서도 웹 애플리케이션을 실행할 수 있다.
웹 SQL 데이터베이스 (Web SQL Database)
- 웹 브라우저가 실행되는 로컬 컴퓨터에 DB를 두고 표준 SQL로 활용할 수 있는 API이다.
인덱스 데이터베이스 (Indexed Database API)
- 웹 브라우저가 실행되는 로컬 컴퓨터에 대용량의 데이터를 저장하고, 인덱스를 이용하여 검색하는 API이다. 이 기능으로 데이터를 다루는 광범위한 웹 애플리케이션을 구현할 수 있다.
파일 입출력 (File I/O)
- 로컬 컴퓨터의 파일을 읽고 쓸 수 있는 API이다.
위치 정보 API (Geolocation API)
- 구글 맵이나 지도 앱을 이용하지 않고, 웹 브라우저 사용자의 위치를 알아내거나 사용자의 위치를 계속 추적하여 변경되는 위치를 알려주는 API이다.
웹 워커 (Web Worker)
- 백그라운드 작업을 만들 수 있는 API이다. 시간이 오래 걸리는 작업을 백그라운드 작업(자바스크립트 코드)으로 만들어 웹 브라우저의 사용자 인터페이스가 느려지지 않도록 할 수 있다.
웹 소켓 (Web Socket)
- 웹 브라우저에서 실행되는 웹 애플리케이션이 웹 서버에서 실행되는 응용프로그램과 직접 통신 할 수 있도록 지원하는 API이다.
오프라인 웹 애플리케이션(Offline Web Application)
- 인터넷에 연결되지 않는 상황에서도 웹 애플리케이션이 정상적으로 실행될 수 있도록 지원하는 API로 애플리케이션 캐시와 데이터 캐시로 구성된다.
'Language > HTML' 카테고리의 다른 글
[HTML] HTML 기초 정리 (0) | 2022.09.13 |
---|---|
[HTML] HTML(Hyper Text Markup Language) Tag Sheet (0) | 2022.09.13 |
[HTML] HTML 태그 간단 정리 (0) | 2022.06.19 |
[HTML] HTML 기본 (0) | 2022.06.19 |
[HTML] HTML 기초 (0) | 2022.06.19 |