HTML콘텐츠 모델과 다양한 API

HTML5는 html4.01,xHTML1.0과 도입한 마크업 언어입니다. 기존 HTML과 HTML5의 차이점은 새롭게 도입된 콘텐츠 모델이라는 개념과 구조관련 요소가 추가 되었다는 점을 들을수 있습니다. 또한 기존에 사용했던 요소중에서 의미가 변한 요소도 있습니다.

콘텐츠 모델(Contents Model)

기존 HTML기반의 마크업에서 일잔적인 인라인 요소와 블록 요소로 구분하는정도의 개념만 존재하였지만 ,HTML15에서는 좀더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것들끼리 그룹화 하였는데 이를 HTML5의 콘텐츠 모델이라고 합니다.

특히 HTML5에 추가된 콘텐츠 모델이란 ,’어떤 요소에 어떤 콘텐츠를 포함해야하는지’,’어떤 요소가 어떤요소를 포함할 수있는지’를 정의한 것을 말합니다. 이 콘텐츠 모델이라는 개념을 통해 자식 요소로 포함 할 수이쓴느 카테고리에 제한을 두었으며 , 이와 반대로 자식 요소가 작성 될 수 있는 카테고리를 제한하였스빈다. 이런 HTML5의 콘텐츠 모델은 단순히 기존 HTML 에서의 문법적인 변화만을 의미하는 것으로 그치지 않고 구조와 구성을 중시하는 마크업으로 진화했다는 점을 이해할수있습니다.

HTML5의 카테고리(Category)에는 Sectioning Root, Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content, Script-supporting Elements, Transparent Content 등의 그룹이 있으며, 하나의 요소가 여러 그룹에 속해 있을 수도 있고, 그렇지 않을 수도 있습니다.

섹셔닝 루트(Sectioning Root)

1	<blockquote>, <body>, <detail>, <fieldset>, <figure>, <td>

몇몇 요소는 섹셔닝 루트라는 그룹으로 구분합니다. 섹셔닝 루트에 속하는 요소는 section이나 article 요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않습니다.

** 메타데이터 콘텐츠(Metadata Content)**

1	<base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

메타데이터는 문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style 요소, 행동을 설정하는 script 요소들을 나타냅니다. 기본적인 웹 브라우저에 직접적으로 표시되지 않으며, 문서(document)와 문서 간의 관계를 설정합니다.

플로우 콘텐츠(Flow Content)

<a>, <abbr>, <address>, <area>(<map> 요소의 자손인 경우), <article>, <aside>, 
<audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, 
<code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, 
<dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, 
<h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, 
<ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <meter>, 
<nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, 
<strong>, <style>(scoped 속성이 있는 경우) <sub>, <sup>, <svg>, <table>, 
<textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>

HTML5의 콘텐츠 모델 관계도에 표시한 것과 같이 메타데이터 콘텐츠 요소 중 일부를 제외하고 문서 본문에 해당하는 body 요소에 들어가는 대부분의 요소들이 플로우 콘텐츠 모델에 속하며, 이 중에서 area, link, meta, style 요소는 조건부로 플로우 콘텐츠가 됩니다.

섹셔닝 콘텐츠(Sectioning Content)

1	<article>, <aside>, <nav>, <section>

섹셔닝 콘텐츠는 대부분 HTML5에서 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타냅니다. 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가집니다.

헤딩 콘텐츠(Heading Content)

1	<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

헤딩 콘텐츠는 섹션의 제목을 나타냅니다. 문서의 아웃라인을 고려하여 사용해야 합니다.

프레이징 콘텐츠(Phrasing Content)

<a>, <abbr>, <area>(<map> 요소의 자손인 경우), <audio>, <b>, <bdi>, <bdo>, <br>, 
<button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, 
<embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, 
<map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, 
 <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>

프레이징 콘텐츠는 문서의 텍스트를 나타내며, 그 텍스트를 문단 내부 레벨로 마크업하는 요소들입니다. 프레이징 콘텐츠가 모여 문단을 구성합니다. a 요소와 같은 일부 요소들은 콘텐츠로 다른 요소를 포함하지 않는다는 전제하에 조건부로 프레이징 콘텐츠가 되기도 합니다. 프레이징 콘텐츠로 분류되는 요소의 대부분은 플로우 콘텐츠 전체를 포함할 수 없으며, 프레이징 콘텐츠로 분류된 요소만을 포함할 수 있습니다. 또한 프레이징 콘텐츠는 텍스트 이외에 임베디드 콘텐츠를 포함할 수 있습니다.

임베디드 콘텐츠(Embedded Content)

1	<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>

임베디드는 ‘포함된’이라는 뜻을 가지고 있으며, 문서 안에 외부 자원(‘외부 리소스’라고 불리기도 함) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠를 말합니다. 외부 자원에는 이미지, 동영상, 플러그인, 아이프레임 콘텐츠 등이 있고, 다른 언어로 된 콘텐츠에는 수학 공식을 표현하는 MathML과 SVG 등이 있습니다.

인터랙티브 콘텐츠(Interactive Content)

<a>, <audio>(controls 속성이 있는 경우),<button>, <details>, <embed>, <iframe>, 
<img>(usemap 속성이 있는 경우), <input>(type 속성이 hidden이 아닌 경우), <keygen>, 
<label>, <object>(usemap 속성이 있는 경우), <select>, <textarea>, 
<video>(controls 속성이 있는 경우)

인터랙티브 콘텐츠는 사용자가 어떤 기능을 조작할 수 있는 (상호 작용) 콘텐츠를 말합니다. 예를 들면, 회원가입 정보를 입력한 후 [확인] 버튼을 누른다거나, 문서에 포함된 동영상을 재생한다거나, 링크를 클릭하는 것 등을 의미합니다. audio, img, input, object, video 요소는 이러한 특성을 바탕으로 조건부 인터랙티브 콘텐츠가 됩니다.

팰퍼블 콘텐츠(Palpable Content)

<a>, <abbr>, <address>, <article>, <aside>, <audio>(controls 속성이 있는 경우), 
<base-img>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, 
<data>, <details>, <dfn>, <div>, <embed>, <form>, <fieldset>, <figure>, 
<dl>(dl 요소의 자식 요소로 하나 이상의 이름과 값으로 구성되어 있는 경우), <em>, <footer>, 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, 
<input>(hidden 속성 값이 아닌 경우), <ins>, <kbd>, <keygen>, <label>, <main>, 
<map>, <mark>, <math>, <menu>(toolbar 속성이 있는 경우), <meter>, <nav>, <object>, 
<ol>(자식 요소로 하나 이상의 li 요소를 포함한 경우), <output>, <p>, <pre>, <progress>,
<q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <var>, <video>, <span>,
<ul>(자식 요소로 하나 이상의 li 요소를 포함한 경우)

팰퍼블 콘텐츠는 기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소를 말하며, 최소한 하나 이상의 요소가 존재해야 합니다. 이때 해당 요소는 숨김 상태여서는 안됩니다.

스크립트 지원 요소(Script-supporting Elements)

<script>

스크립트 지원 요소는 요소 자체가 어떤 정보를 표현하지는 않지만 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는 데 사용됩니다.

트랜스 패어런트 콘텐츠(Transparent Content)

1	<table>, <audio>, <canvas>, <del>, <ins>, <map>, <noscript>, <object>, <video>

모든 요소는 콘텐츠 모델을 가지지만, 앞에서 설명한 카테고리에 속하지 않은 경우도 있습니다. 이러한 요소들을 ‘트랜스 패어런트(Transparent)’라고 합니다. 트랜스페어런트 콘텐츠는 투명하다는 의미가 아니라 트랜스 패어런트 콘텐츠 요소와 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 HTML5 문법에 오류가 없다는 것을 의미합니다.

다양한 API의 추가

HTML5의 커다란 변화 중 하나로는 다양한 API(Application Programming Interface)의 추가를 들 수 있습니다. API란, 프로그램을 개발할 때 필요한 기본 기능을 의미합니다. 새로운 프로그램을 만들 때 사용하는 프로그래밍 언어(C 언어, Java, JavaScript 등) 차원에서 제공되거나 프로그램이 구동되는 환경을 의미하는 플랫폼에서 만들어져 제공되며 프로그램 개발자는 API를 활용하여 실제 필요로 하는 기능을 완성할 수 있습니다.

HTML5에서는 자바스크립트(JavaScript) 기술을 좀 더 편리하게 이용할 수 있도록 다양한 API를 지원하고 있습니다. HTML5에 추가된 API는 다음과 같습니다.

오프라인 웹 구현을 위한 API

오프라인에서 동작할 수 있는 웹 기능을 구현하기 위한 API로, Web Strorage, Web SQL Database, IndexedDB, Application Cache 등의 API가 추가되었습니다.

Web Storage : 브라우저에 데이터를 저장하기 위한 공간으로, 쿠키와 비교했을 때 크기 제한과 유효 기간이 없고, 데이터가 서버로 전송되지 않으며, JavaScript 객체를 저장할 수 있다는 장점을 가지고 있습니다.
Web SQL Database/Indexed Database : Web SQL Database와 Indexed Database API는 클라이언트(웹 브라우저)에서 관리되는 데이터베이스를 제어할 수 있는 API로 구성되어 있습니다.
Application Cache : Application Cache는 웹 애플리케이션을 오프라인에서 사용하는 데 필요한 리소스(HTML, CSS, JS, 이미지 등)를 클라이언트 쪽에 캐시하기 위한 기능으로, 이를 활용하면 리소스가 로컬에 캐시된 상태에서 웹브라우저가 네트워크에 접속하지 않고 캐시된 리소스를 이용할 수 있습니다.

실시간 커뮤니케이션 API

Web Workers : Web Workers는 메인 스레드(UI)와 독립적인 백그라운드 프로세스로 처리되는 스크립트를 말하며, 이를 활용하면 웹브라우저 내에서 자바스크립트로 멀티스레드 프로그램을 구현할 수 있습니다.
Web Socket : Web Socket은 웹 브라우저와 서버 간 양방향 전이중 통신(Full Duplex)을 구현한 Web Socket 프로토콜을 이용할 수 있는 API 입니다.
Notifications : Notifications API는 운영 체제에 독립적인 플랫폼 수준의 알림 메시지를 보여주는 API 입니다.

파일/하드웨어 접근 API

웹브라우저에서 로컬 저장 장치 간 파일을 주고받을 수 있는 API와 웹 브라우저가 설치된 단말기의 하드웨어에 접근할 수 있는 API 입니다.

File API(Desktop Drag-In, Desktop Drag-Out) : File API를 이용하면 로컬 파일 시스템과 웹 브라우저 간에 파일을 주고받을 수 있습니다.
Geolocation : Geolocation은 웹 브라우저가 설치되어 있는 단말기(데스크톱, 스마트폰 등)의 GPS 장치를 구동하여 현재 위치 정보를 받아오는 기능을 정의한 API 입니다.
Device Orientation : Device Orientation은 단말기의 센서를 이용하여 현재 방향과 기울기가 같은 정보를 구할 수 있는 API 입니다.
Speech Input : Speech Input은 단말기의 마이크로폰을 이용하여 음성을 입력받은 후 이를 문자로 바꿔주는 새로운 입력 방식입니다.

GUI를 위한 API

Drag & Drop : HTML4.01에서는 Drag & Drop을 구현하기 위해 직접 자바스크립트로 개발하거나 UI 관련 자바스크립트 라이브러리를 이용해야 했지만, HTML5에서는 Drag & Drop API를 이용하여 쉽게 구현할 수 있습니다.