HTML5란 무엇인가?

2020. 2. 9. 20:55

HTML5의 등장과 그 배경

대부분 알고 있듯이 웹을 지탱하는 핵심 기술은 HTML 입니다.

그리고 모바일 웹에서 핵심 기술을 뽑으라면 단연 HTML5 입니다.

흔히 HTML5 에 폭발적인 관심을 불러일으킨 데에는 플래시(Flach)와 관련된 스티브 잡스의 발언이 그 출발이라는 것에 공통된 의견을 모읍니다.

HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다.

가장 특징적인 것은 기존의 웹 문서에서는 HTML 만으로 웹 서비스를 구성하는 것이 불가능하였지만 HTML5 로 넘어오면서 클라이언트와 서버와의 통신이 가능하며 이에 대한 부가 기능을 제공함으로써 다른 외부 Active-X와 같은 plug-ins 를 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다는 것입니다.

HTML5 는 Client Side Technology 를 강력하게 지원하는 단순 표현 HTML을 그 이상의 의미를 가지도록 더 높은 차원으로 발전시킨 기술입니다.

즉, 기존의 HTML은 HTML 4.0 이후에도 W3C에 의해서 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 발전해 왔지만 이런 그동안의 HTML 에서 의 한계를 극복하기 위해 HTML5 가 탄생하게 된 것입니다.

지금의 웹은 단순히 문서를 읽는 것 외에도 동영상이나 음악을 감상하거나 은행 업무를 하는 등 다양한 인터넷 이용 형태가 존재합니다.
그로 인해 웹브라우저와 HTML 문서 자체만으로는 이 모든 기능을 원활히 이용할 수 없었고 이 때문에 웹 브라우저와 연동되는 특정 프로그램을 사용자의 PC에 추가로 설치해 웹브라우저의 기능을 확장시키는 방법이 등장했다.
이러한 추가 프로그램을 플러그인(plug-in)이라고 한다.
웹브라우저용 플러그인은 다양한 종류가 존재하는데, 가장 대표적인 것은 마이크로소프트의 웹브라우저인 인터넷익스플로러(Internet Explorer)용 플러그인인 액티브엑스(ActiveX)다.
다시말해, 웹 브라우저의 관점에서 plug-ins 는 웹브라우저와 연동되는 특정 프로그램을 사용자의 PC에 추가로 설치해 웹브라우저의 기능을 확장시키는 방법을 말한다.
PC용 운영체제 중 가장 높은 점유율을 가지고 있는 것이 마이크로소프트의 윈도우(Windows)이고, 이 윈도우에 기본적으로 내장된 웹브라우저가 바로 인터넷익스플로러이다 보니 액티브엑스 역시 자연스럽게 웹브라우저용 플러그인의 대명사가 되었다.
Active-X 가장 큰 장점이라면 서비스 제공자의 편의성이 매우 높다는 점이다.
액티브엑스가 설치되면 사용자의 PC에서 이를 실행하는 것 만으로 손쉽게 웹사이트와 기능이 연동되므로, 웹사이트 쪽에서 사용자 PC의 기능을 제어하는 과정도 매우 간편하다.
또한, 여러 가지 액티브엑스를 설치함에 따라 웹브라우저 및 웹사이트의 기능을 거의 제한 없이 확장할 수 있는 것도 장점이다.
실제로 멀티미디어 콘텐츠 구동용, 은행이나 주식 등 금융 거래용, 그리고 사용자의 신원을 증명하고 공문서를 출력하는 등의 기능을 가진 관공서용 등, 셀 수 없을 정도로 많은 액티브엑스가 개발되어 쓰이고 있다.
하지만 액티브엑스는 단점 또한 적지 않다.
가장 큰 단점은 마이크로소프트의 인터넷익스플로러에서만 쓸 수 있다는 점이다.
인터넷익스플로러가 PC용 웹브라우저 시장에서 가장 높은 점유율을 차지하고 있는 것은 사실이지만, 2000년대부터 모질라의 파이어폭스(Firefox), 구글의 크롬(chrome)과 같은 타사의 웹브라우저가 점유율을 크게 끌어올렸으며, 현재 세계적으로 PC용 웹브라우저 시장에서 인터넷익스플로러의 점유율이 60% 이하로 떨어졌다.
더욱이, 윈도 기반의 PC가 아닌 스마트폰이나 태블릿컴퓨터에서는 액티브엑스를 전혀 사용할 수 없으므로 접근성 면에서 명백한 한계가 존재한다.
즉, 호환성, 보안성 측면에서 적지 않은 부작용을 가지고 있습니다.

HTML5 의 등장으로 CSS3, 자바스크립트 API를 통한 기능의 확장과 결합을 통해 기존의 HTML 이상의 의미를 부여하게 되었고 기존의 Active-X 와 같은 플러그인인 외부 기술에 의존했던 것을 걷어냄으로서 웹표준, 웹접근성을 한층 높여놓고 있습니다.

그리고 국내에서도 최근에 정부나 대기업에서도 액티브엑스의 과도한 사용을 자제하고 웹 표준을 권장하는 움직임을 보이고 있습니다.

특히 은행에서는 액티브엑스의 설치 없이 다른 웹브라우저에서도 인터넷 금융 서비스를 사용할 수 있는 이른바 "오픈뱅킹"을 적극적으로 도입하는 추세입니다.

새로운 웹 표준 문서 규격인 "HTML5"가 액티브엑스의 문제점을 극복할 수 있는 수단이기도 하며 HTML5 규격으로 개발된 웹사이트는 각기 다른 웹브라우저나 운영체제를 사용하더라도 동일하게 웹페이지를 표시할 수 있으며, 액티브엑스와 같은 플러그인의 설치 없이도 자체적으로 음악이나 동영상의 재생이 가능하도록 설계,제작할 수 있는 것입니다.

HTML5의 개념 및 특징

HTML5 는 차세대 웹 표준으로 확정(2014년 10월 28일)되었으며, 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다.

예를 들어, 오디오·비디오·그래픽 처리, 위치정보 제공 등 다양한 기능을 제공함으로써, 웹 자체에서 처리할 수 있는 기능이 대폭 향상 되었습니다.

※ HTML(Hyper Text Markup Language)는 웹 문서를 만들 때 사용하는 프로그래밍 언어입니다.

HTML5의 주요기능

HTML5 에는 기존의 HTML 과는 다른 다음과 같은 특징을 가지고 있습니다.

Device AccessDEVICE ACCESS : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
CONNECTIVITY(Web Socket) : 웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
3D, GRAPHICS & EFFECTS : 다양한 2차원 및 3차원 그래픽 기능을 지원
Styling Effects(CSS3) : 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원
OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
Geo-Location: GPS없이도 단말기의 지리적인 위치 정보를 제공
SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

그리고 HTML5 설계에 호환성 원칙을 두고 있습니다.

HTML5 디자인 원칙 : 호환성

콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠도 문제없이 이용 가능해야 한다.
이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.
이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.

위와 같은 디자인 원칙을 세우고 있지만 HTML5 는 아직 확정되지 않은 권고안으로서 장래에 위의 원칙을 모두 지킬 것으로 보고 있습니다.

하위 브라우저에서 HTML5 표현하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
    <title>HTML5</title>
    <link rel="stylesheet" href="./css/style.css">
    // 웹에서 사용하는 경우
    <!--[if IE]>
    	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    // 관련 자바스크립트 파일을 다운로드하여 사용하는 경우
    <!--[if IE]><script src="../js/html5.js"></script><![endif]-->
</head>

변화된 브라우저의 위상 - 플랫폼이 된 브라우저

지금까지 알아본 HTML5 변환의 핵심 사항들은 브라우저의 기능 증대와 관련이 있습니다.

브라우저가 이미 상단한 기능을 하기 때문에 브라우저를 단순히 데이터를 보여주는 뷰어가 아니라 프로그램을 실행할 수 있는 플랫폼으로 보자는 시각이 생겼습니다.

플랫폼을 쉽게 설명하지면 운영체제에 비유해 볼 수 있는데 윈도우라는 운영체제가 있기 때문에 MS Office 같은 프로그램을 실행할 수 있듯이 브라우저라는 플랫폼에 필요한 데이터만 제공하면 하나의 애플리케이션처럼 브라우저 위에서 동작하는 방식을 의미합니다.

다시 말해서 작성된 HTML 페이지를 프로그램으로 간주하고 이 프로그램이 실행되는 운영체제를 브라우저라고 생각하는 발상이 HTML5의 핵심입니다.

운영체제의 호환성와 HTML 스펙

HTML 페이지를 프로그램으로 간주한다면 현존하는 브라우저 종류는 마치 다양한 운영체제에 비유해 볼 수 있을 것입니다.

운영체제가 리눅스, 윈도우, 맥, iOS, 안드로이드와 같이 다양하듯이 브라우저도 IE, 크롬, 사파리, 파이어폭스, 오페라 등 다양합니다.

작성된 HTML 페이지가 프로그램이므로 이제 이것을 실행하는 브라우저들은 호환성을 위해서 공통된 기능을 구현해야 하는데 이것이 바로 HTML5 의 스펙(Spec)이 됩니다.

위에서 알아본 HTML5의 주요 기능들을 브라우저가 구현해야 할 기능들이며 이 기능들이 호환성있게 구축된다면 HTML5 의 진정한 스펙이 완성될 것입니다.

HTML4 vs HTML5

HTML4 와 HTML5 의 차이점은 크게 Syntax(구문), Language(언어), API 세가지로 나눌 수 있으며, 구문, 언어, API 대한 내용에 대한 것을 간단히 살펴보도록 하겠습니다.<

Syntax(구문)

다음의 HTML5 문서를 살펴보도록 하겠습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Document type</title>
</head>
<body>
	<!-- 콘텐츠 영역 -->
</body>
</html>

DOCTYPE

문서타입은 기존의 HTML 문서타입보다 훨씬 간결합니다.

HTML5 문서 작성시 최상단에 DOCTYPE 을 작성해야 하며 개행문자(enter)도 들어가서는 안됩니다.

DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있으며 HTML5 문서를 작성할 경우에 HTML 로 작성할 것인지 XHTML 로 작성할 지를 첫 부분에 선언할 수 있습니다.

즉, HTML5 가 따르는 HTML 문법은 "HTML5"로 HTML5 가 따르는 XML 문법을 "XHTML5" 로 정의할 수 있습니다.

Encoding

다음의 코드는 기존 문서 타입에서 사용하던 Charset(문자셋) 즉, Encoding 에 대한 것입니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

다음은 HTML5 의 문자셋 부분입니다.

<meta charset="UTF-8">

기존 문자셋과 비교해 보면 이또한 무척이나 간단해 진 것을 알 수 있습니다.

그래픽 언어의 사용

HTML5 에서는 수식기술언어 MathML, 그래픽언어 SVG 등을 사용할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div>
	<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</div>
</body>
</html>

SVG란?
SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 XML을 기반으로 만들어진 언어로서 W3C(World Wide Web Consortium)에 의해 제안된 XML 그래픽 표준입니다.
XML의 개방성, 상호운용성 등의 장점을 모두 수용하며, SMIL, GML, MathML 등 다른 XML 언어들과 결합시켜 다양한 웹 어플리케이션으로 응용할 수 있습니다.
실시간 데이터로부터 고품질의 다이나믹한 그래픽을 만들어 낼 수 있기 때문에 전자상거래, 지리정보, 교육, 광고 등의 분야에 적용될 수 있습니다.

그리고 HTML5 마크업시 TAG 는 대소문자를 구분하지 않습니다.

하지만 가독성 측면이나 기존의 개발 패턴에 준수하는 것이 좋기 때문에 소문자로 작성하는 것을 권장합니다.

Language(언어)

언어적인 측면에서 HTML4 와 HTML5 간의 차이점을 좀더 자세히 알 수 있습니다.

예를 들어 새롭게 생긴 Element, Attribute 와 변경된 Element, Attribute 그리고 사라져 버린 Element, Attribute 에 대해 알아보겠습니다.

새로운 Element

새롭게 추가된 엘리먼트에는 특히나 시맨틱(의미론적인)한 요소들이 많이 추가되었습니다.

다음의 표는 새롭게 추가된 Semantic Element 입니다.

Element	Description
Header	문서의 Header 를 나타낼 때 사용한다.
Footer	문서의 Footer 를 나타낼 때 사용한다.
Nav	문서내에 Navigation 요소가 있을 때 사용한다.
Section	문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.
Article	뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다.
Aside	주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다.
Figure	그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다.
Figcaption	캡션에 사용한다.

시맨틱 요소들은 다음과 같이 마크업 구성을 할 수 있습니다.

이러한 새로운 Sementic Element 들로 인해서 기존의 Div Tag 들로 나뉘어 졌단 막연하고 무의미했던 Contents 들이 한층더 유용한 정보들로 탈바꿈하게 되었습니다.

이 밖에 몇가지 Element 가 추가되었습니다.

Element	Description
Audio, Video	HTML 5 Element 중 관심이 집중되는 Element 중 하나다. 멀티미디어 컨텐츠를 표시하는 데 사용한다.
Embed	Plugin 컨텐츠를 표시할 때 사용한다.
Mark	별도로 표시한 문자를 표시하는데 사용한다.
Progress	작업 진행상황을 나타낼 때 사용한다.
Meter	측정값을 표시할 때 사용한다.
Time	날짜, 시간을 표시할 때 사용한다.
Ruby, rt, rp	Ruby 언어를 나타낼 때 사용한다.
Canvas	Bitmap Graphic을 표시할 때 사용한다.
Command	사용자가 호출할 수 있는 명령어를 표시하는데 사용한다
details	사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시하는데 사용한다.
Datalist	List Attribute 와 함께 사용하여 ComboBox 를 만들때 사용한다.
Keygen	키쌍(Key pair)을 생성할 때 사용한다.
Output	스크립트 계산 결과 같은 실행결과를 표시하는데 사용한다.

새로운 Attribute

새롭게 추가된 속성들 중에는 다음과 같은 attribute 가 있습니다.

Attribute	Description
data-*	접두사 "data-" 를 가진 속성으로 추후 HTML 버전 충돌없이 사용자 태그로 이용하거나 추후 브라우져가 지원하게 되었을때 사용할 수 있다.
role, aria-*	보조기능에 가리키는데 사용할 수 있다.
contenteditable	편집가능한 Area 임을 나타낸다.
contextmenu	작성자가 제작한 Context Menu 지정하는데 사용할 수 있다.
draggable	새로운 Drag & Drop API 에서 사용할 수 있다.
hidden	element 가 아직 없거나 없을 때 사용한다.
spellcheck	맞춤범 검사기능을 제공할지 여부를 지정한다.

변경된 Element

Element	Description
a	href 속성이 없이 사용하면 "placeholder link" 를 나타낸다.
address	sectioning 의 새로운 개념으로 범위를 나타낸다. 어떤 Contents 부분에 대한 관련된 연락처 정보인지 알 수 있다.
b	문자열 강조 뿐만이 아니라 제품소개 중 제품명 키워드 같이 특별히 중요하지는 않으나 일반적으로 강조하기 위해 사용한다.
hr	단락 수준의 주제 바꿈에 사용한다.
i	기존 기능처럼 문자의 기울임 뿐만이 아니라 음성, 분위기, 분류명, 기술용어, 다른언어의 숙어구, 생각, 선박명 등을 표현할 때 사용한다.
menu	툴바와 Context Menu 용으로 사용한다.
strong	기존 Strong 의 기능보다 더 중요한 것을 표시할때 사용한다.

변경된 Attribute

아래 속성은 사용하지 않기를 권장하며 꼭 필요한 곳에서만 사용할 수 있도록 합니다.

Attribute	Description
img 의 border	border 값은 0 일때만 사용하고 CSS 를 사용할 수 있다.
a 의 name	name 속성을 id 속성으로 바꾸어 쓸 수있다.
table 의 summary	다른 대안을 정의하고 있다.
script 의 language	language 값은 JavaScript 에만 사용하고 type 속성과 함께 쓰지 않고 생략할 수있다.

사라진 Element

제거된 Element 의 이유를 살펴보면 크게 세 가지로 나눌 수 있습니다.

CSS 로 처리할 수 있는 Element
Frame 관련 Element
거의 사용되지 않는 Element

다음 Element 는 순전히 보여지는 것에만 사용되는 Element 이고 CSS 로 처리 가능한 엘리먼트이기에 사라졌습니다.

basefont, big, center, font, strike, u 등...

다음 Element 는 Frame 과 관련된 Element 로 이들 Element 의 사용은 사용성과 접근성에 부정적인 영향을 끼치 때문에 제거되었습니다.

frame, frameset, noframes

다음 Element 는 자주 사용되지 않고, 혼란스럽게하거나 다른 Element 로 기능을 대체할 수 있기 때문에 제거된 엘리먼트들입니다.

acronym, applet, isindex, dir

API(Application Programing Interface)

다음의 사항들은 새롭게 사용할 수 있도록 고안된 API 입니다.

Video/Audio API : Video, Audio Element 와 함께 Video, Audio 를 재생하는데 사용수 있다.
Offline Web Application : 말 그대로 Offline 을 지원하는 API 이다.
Web Application 이 특정 프로토콜 또는 Media Type 을 등록할 수 있는 API
새로운 Grobal Attribute 인 "Contenteditable" Attribute 와 함께 사용하는 편집 API
"draggable" Attribute 와 함께 사용하는 Drag & Drop API
Navigation 시 사용하는 History 정보를 노출하는 API

그리고 기존의 API 아래와 같은 사항들을 확장하였습니다.

HTMLDocumnet 확장사항

DOM Level2 HTML 의 HTMLDocument interface 를 확장

getElementsByClassName() : Class Name 으로 Element 를 선택할 수 있다.
innerHTML : HTML 또는 XML 문서를 분석하고 직렬화하는 쉬운 방법이다.
activeElement, hasFocus : Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확인한다.
getSelection() : 현재 선택되어있는 Object 를 반환한다.

HTMLElenemt 확장사항

HTML5 의 HTMLElement interface 는 몇가지 확장사항들이 있습니다.

getElementsByClassName()
innerHTML
classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다.
Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle() 과 같은 함수를 노출한다.

Conclusion

지금까지 HTML5 에 대해 알아보았으며 HTML4와의 차이점에 대해서도 간단히 알아보았습니다.

모든 사항을 모두 숙지할 수는 없지만 기본적으로 알아두어야 사항, 즉 많이 사용하는 것들에 대한 정도로만 숙지하되 필요시 혹은 사용시에 조금더 주의를 기울여 사용하면 될 것이라고 생각됩니다.

출처: https://webclub.tistory.com/491 [Web Club]

저작자표시 비영리

'프론트엔드 개발 놀이터 > Html' 카테고리의 다른 글

인쇄영역 나누기, 페이지 나누기 (0)	2020.04.20
html5 캔버스 완전정복 (0)	2020.02.13
쉐도우 돔 사용방법 - 2/2 (0)	2020.02.05
쉐도우 돔(Shadow Dom)이란 - 1/2 (0)	2020.02.05
[크롬, js] 이 페이지를 번역하시겠습니까? 사전 차단 방법 (0)	2020.02.04

내나라(nenara.com)