깔끔하게 정리되어있는 곳이 있어서 퍼왔습니다.
출처: https://webclub.tistory.com/491
HTML5란 무엇인가?
HTML5의 등장과 그 배경 대부분 알고 있듯이 웹을 지탱하는 핵심 기술은 HTML 입니다. 그리고 모바일 웹에서 핵심 기술을 뽑으라면 단연 HTML5 입니다. 흔히 HTML5 에 폭발적인 관심을 불러일으킨 데에
webclub.tistory.com
HTML5의 개요
HyperText Markup Language의 약자로 월드와이드웹(World Wide Web)을 통해 제공되는 정보를 나타낼 목적으로 사용되는 마크업 언어이며 HTML의 5번째 버전을 의미한다.
* 웹표준(HTML5)이 등장하게 된 배경
HTML5가 만들어 지기 이전까지는 같은 웹 사이트라 하더라도 접속하여 사용하는 웹 브라우저의 종류 또는 버전에 따라 화면이 다르게 보이는 상황이 발생 했는데
이러한 이유로 웹표준의 필요성이 절실하게 요구되었으며, 이런 요구를 충족시키기 위한 기술로 HTML5가 등장하였다.
* HTML5의 주요 특징
- HTML5 이전 버전까지는 웹 브라우저에 추가 설치된 플러그인의 도움 없이 동영상이나 음악을 재생할 수 없었으나 HTML5부터는 플러그인의 추가 설치 없이 동영상이나 음악을 웹 브라우저 상에서 곧바로 재생할 수 있다.
- HTML5에서는 SVG 태그를 이용한 2차원 벡터 그래픽과 자바 스크립트 캔버스를 사용한 2차원 래스터 그래픽, CSS3와 자바스크립트 WebGL을 사용한 3차원 그래픽의 구현이 가능하다.
- HTML5는 서버와 소켓 통신이 가능해 실시간으로 서버와 양방향 통신을 수행할 수 있다.
- 스마트폰의 배터리 잔량을 확인하거나 GPS를 통한 위치 확인 및 장치 접근이 가능하다.
- HTML5는 오프라인 상태에서도 작업이 가능하다.
▷ Device AccessDEVICE ACCESS : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
▷ CONNECTIVITY(Web Socket) :다양한 2차원 및 3차원 그래픽 기능을 지원
▷ Styiling Effects(CSS3) : 글씨체, 색상. 배경 등 다양한 스타일 및 이펙트 기능 제공
▷ MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원
▷ OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 한다.
▷ Geo - Location : GPS없이도 단말기의 지리적인 위치 정보를 제공한다.
▷ SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색을 제공한다.
* HTML5 디자인 원칙 : 호환성
▷ 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠도 문제없이 이용 가능해야 한다.
▷ 이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.
▷ 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
▷ 기능의 재사용기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
▷ 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.
Related Info
HTML4 vs HTML5
HTML4 와 HTML5 의 차이점은 크게 Syntax(구문), Language(언어), 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() 과 같은 함수를 노출한다.
댓글