검수요청.png검수요청.png

"HTML5"의 두 판 사이의 차이

위키원
이동: 둘러보기, 검색
(→‎특징)
잔글
 
(사용자 4명의 중간 판 31개는 보이지 않습니다)
1번째 줄: 1번째 줄:
−
'''HTML5'''(에이치티엠엘 파이브)는 Hypertext Markup Language version 5의 약자로서, 기존의 [[HTML]]이 [[텍스트]] 및 [[하이퍼링크]] 위주로 표시하던 것과 달리 HTML5는 [[액티브 엑스]](Active-X)를 사용하지 않고, 오디오, 비디오, 그래픽, 기타 다양한 응용 프로그램을 웹 자체에서 구현할 수 있는 코딩 언어이다. 2014년 [[W3C]]에서 표준안을 확정했다.
+
[[파일:HTML5 로고.png|썸네일|200픽셀|'''HTML5''']]
 +
[[파일:HTML5 글자.png|썸네일|300픽셀|'''HTML5''']]
 +
[[파일:HTML 글자.png|썸네일|300픽셀|'''[[HTML]]''']]
 +
[[파일:W3C 글자.png|썸네일|300픽셀|'''[[W3C]]'''(World Wide Web Consortium)]]
 +
[[파일:팀 버너스-리.jpg|썸네일|200픽셀|'''[[팀 버너스-리]]'''(Tim Berners-Lee)]]
 +
 
 +
'''HTML5'''(에이치티엠엘 파이브)는 Hypertext Markup Language version 5의 약자로서, 기존의 [[HTML]]이 [[텍스트]] 및 [[하이퍼링크]] 위주로 표시하던 것과 달리 HTML5는 [[액티브엑스]](Active-X)를 사용하지 않고, 오디오, 비디오, 그래픽, 기타 다양한 응용 프로그램을 웹 자체에서 구현할 수 있는 코딩 언어이다. 2014년 '''[[W3C]]'''에서 표준안을 확정했다.
  
 
== 개요  ==
 
== 개요  ==
−
HTML 5는 'HyperText Markup Language 5'의 약자로, 웹 페이지를 위한 하나의 중요한 '언어'이다.
+
HTML 5는 웹 페이지를 위한 하나의 중요한 '언어'이고,
−
웹 표준 기관인 월드와이드웹 컨소시엄([[W3C]])이 만들고 있는 차세대 웹 언어 규격이다. HTML이라는 언어를 이용해서 지금의 웹 페이지의 글, 아이콘, 표, 클릭 박스 등 제작되었다고 볼 수 있다.
+
웹 표준 기관인 월드와이드웹 컨소시엄([[W3C]])이 만들고 있는 차세대 웹 언어 규격이다. HTML이라는 언어를 이용해서 지금의 웹 페이지의 글, 아이콘, 표, 클릭 박스 등 제작되었다고 볼 수 있다. 위와 같이 HTML 5도 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, HTML의 종류 중 하나이다. 별도 설치 없이 웹브라우저상에서 다양한 멀티미디어 콘텐츠와 앱 등을 바로 제공할 수 있다.
−
위와 같이 HTML 5도 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, HTML의 종류 중 하나이다. 별도 설치 없이 웹브라우저상에서 다양한 멀티미디어 콘텐츠와 앱 등을 바로 제공할 수 있다.
 
  
 
== 등장배경  ==
 
== 등장배경  ==
11번째 줄: 16번째 줄:
 
1990년대 공급자 기반의 홈페이지를 작성할 때 웹페이지를 구조적으로 표현함에 있어서 사용하기 편리하고 당시의 기술로는 유저가 판단하기에 심미성이 뛰어나 많은 곳에서 활용되었지만 HTML3.x버젼으로 업데이트된 시점에서 HTML만으로는 표현하기에는 제한사항이 발생되어 필요한 태그를 사용자가 직접 정의할 수 있는 XML이 생겨나게 되었고 XML은 HTML이 고정된 태그만을 사용가능하다면 DTD라는 XML 스키마를 정의함으로 인해 사용자가 직접 태그를 작성하게 할 수 있게 함으로써 HTML에서 확장성을 강조했다.
 
1990년대 공급자 기반의 홈페이지를 작성할 때 웹페이지를 구조적으로 표현함에 있어서 사용하기 편리하고 당시의 기술로는 유저가 판단하기에 심미성이 뛰어나 많은 곳에서 활용되었지만 HTML3.x버젼으로 업데이트된 시점에서 HTML만으로는 표현하기에는 제한사항이 발생되어 필요한 태그를 사용자가 직접 정의할 수 있는 XML이 생겨나게 되었고 XML은 HTML이 고정된 태그만을 사용가능하다면 DTD라는 XML 스키마를 정의함으로 인해 사용자가 직접 태그를 작성하게 할 수 있게 함으로써 HTML에서 확장성을 강조했다.
 
이에 XML과 HTML을 융합한 [[XHTML]]이 등장하게 되었는데 W3C는 HTML의 개발을 중지하고  XHTML을 표준으로 지정하려는 움직임이 일게 되는데 이미 HTML사용에 익숙해진 사용자들(개발자,디자이너)과 브라우져 공급자들은 XHTML보다 HTML을 더욱 발전시키는 쪽이 더 나을것이라는 생각을 가지고  W3C의 생각과는 정면으로 대치하게 된다.
 
이에 XML과 HTML을 융합한 [[XHTML]]이 등장하게 되었는데 W3C는 HTML의 개발을 중지하고  XHTML을 표준으로 지정하려는 움직임이 일게 되는데 이미 HTML사용에 익숙해진 사용자들(개발자,디자이너)과 브라우져 공급자들은 XHTML보다 HTML을 더욱 발전시키는 쪽이 더 나을것이라는 생각을 가지고  W3C의 생각과는 정면으로 대치하게 된다.
−
이에 독립적으로 HTML을 발전시키위해 Apple,Mozilla,Opera는 [[WHATWG]]라는 워킹그룹을 발촉하게 되고 이에 W3C는 WHATWG를 정식 W3C워킹그룹으로 인정받고 XHTML의 개발을 중지하면서 HTML을 업데이트 하게 되는데 이것이 현재 HTML5가 되었다.<ref>초초의 다락방, 〈[https://cho2.tistory.com/entry/HTML5%EC%9D%98-%EB%93%B1%EC%9E%A5%EB%B0%B0%EA%B2%BD/등장배경]〉,《티스토리》, 2015-01-30</ref>
+
이에 독립적으로 HTML을 발전시키위해 Apple,Mozilla,Opera는 [[WHATWG]]라는 워킹그룹을 발촉하게 되고 이에 W3C는 WHATWG를 정식 W3C워킹그룹으로 인정받고 XHTML의 개발을 중지하면서 HTML을 업데이트 하게 되는데 이것이 현재 HTML5가 되었다.<ref>초초의 다락방, 〈[https://cho2.tistory.com/entry/HTML5%EC%9D%98-%EB%93%B1%EC%9E%A5%EB%B0%B0%EA%B2%BD 등장배경]〉,《티스토리》, 2015-01-30</ref>
  
 
== 역사 ==
 
== 역사 ==
27번째 줄: 32번째 줄:
 
* 2014.02 : HTML5 최종 표준안 (Recommendation)
 
* 2014.02 : HTML5 최종 표준안 (Recommendation)
 
* 2016.11 : HTML5의 버전업인 HTML5.1이 최신 표준으로 지정되었다.
 
* 2016.11 : HTML5의 버전업인 HTML5.1이 최신 표준으로 지정되었다.
−
* 2017.12 : HTML5.1의 버전업인 HTML5.2가 최신 표준으로 지정되었다. 또한 HTML5.3이 워킹 드래프트 단계에 돌입했다.
+
* 2017.12 : HTML5.1의 버전업인 HTML5.2가 최신 표준으로 지정되었다. 또한 HTML5.3이 워킹 드래프트 단계에 돌입했다.<ref>나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5 </ref><ref>정민권, 〈[http://doomok.dothome.co.kr/html5/html5.html HTML5의 역사]〉,《네이버 카페》, 2012년</ref><ref>위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5</ref>
−
<ref>나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5 </ref>
 
−
<ref>http://doomok.dothome.co.kr/html5/html5.html</ref>
 
−
<ref>위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5</ref>
 
  
 
== 특징  ==
 
== 특징  ==
50번째 줄: 52번째 줄:
 
* 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
 
* 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
 
* 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
 
* 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
−
* 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.
+
* 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.<ref>복세편살 개발 라이프, 〈[https://www.leafcats.com/99 HTML5 탄생 배경과 HTML5의 특징]〉,《티스토리》, 2017년</ref><ref>likingyo, 〈[https://blog.naver.com/likingyo/221079942961 HTML5의 핵심적인 특징]〉,《네이버 블로그》, 2017-08-22</ref><ref>webclub, 〈[https://webclub.tistory.com/491 HTML5란 무엇인가?]〉,《티스토리》, 2016년</ref>
−
<ref>복세편살 개발 라이프, 〈[https://www.leafcats.com/99]〉</ref>
 
−
<ref>likingyo, 〈[https://blog.naver.com/likingyo/221079942961]〉,《네이버》, 2017-08-22</ref>
 
−
<ref>webclub, 〈[https://webclub.tistory.com/491]〉,《티스토리》</ref>
 
  
 
== 활용  ==
 
== 활용  ==
−
HTML5는 개발자들 사이에서 최신 웹 애플리케이션을 만들 데에도 활용되고 있다. HTML5를 지원하고 활용한 대표적인 프로그램으로는 어도비 엣지([[Adobe Edge]]), 어도비 드림위버 CS6, 어도비 콜드퓨전 10, 센차 아키텍트 2([[sencha Architect 2]]). 센차 터치 2([[Sencha Touch 2]]), 도조 파운데이션 마케타([[Dojo Foundation Maqetta]]), 마이크로소프트 비주얼 스튜디오 2010 서비스 팩 1, 젯브레인스 웹스톰 4.0([[JetBrains WebStorm 4.0]]), [[구글 웹 툴킷]] 등등 HTML5를 활용한 프로그램들이 점점 더 많아지고 있으며 다양한 웹사이트에서 또한 활용되고 있다. 이에 따라 애플ㆍ마이크로소프트(MS), 구글, 페이스북 등 글로벌 IT 기업들은 HTML5 시대 주도권을 잡고 활용하기 위해 치열한 경쟁에 돌입하기도 했다.
+
HTML5는 개발자들 사이에서 최신 웹 애플리케이션을 만들 데에도 활용되고 있다. HTML5를 지원하고 활용한 대표적인 프로그램으로는 어도비 엣지([[Adobe Edge]]), 어도비 드림위버 CS6, 어도비 콜드퓨전 10, 센차 아키텍트 2([[sencha Architect 2]]). 센차 터치 2([[Sencha Touch 2]]), 도조 파운데이션 마케타([[Dojo Foundation Maqetta]]), 마이크로소프트 비주얼 스튜디오 2010 서비스 팩 1, 젯브레인스 웹스톰 4.0([[JetBrains WebStorm 4.0]]), [[구글 웹 툴킷]] 등등 HTML5를 활용한 프로그램들이 점점 더 많아지고 있으며 다양한 웹사이트에서 또한 활용되고 있다. 이에 따라 애플ㆍ마이크로소프트(MS), 구글, 페이스북 등 글로벌 IT 기업들은 HTML5 시대 주도권을 잡고 활용하기 위해 치열한 경쟁에 돌입하기도 했다.<ref>InfoWorld, 〈[http://www.itworld.co.kr/print/76718 HTML5를 최대한 활용하기 위한 9가지 프로그래밍 도구]〉, 《아이티월드》</ref>
  
 
== 종류(버전)  ==
 
== 종류(버전)  ==
−
 
+
* '''HTML5'''는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다.
−
'''[[HTML5]]'''
+
* '''HTML5.1'''은 기본 HTML5에 버그를 고치고 추가기능을 포함한 업그레이드 버전이다.<ref>나무위키 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5</ref>
−
 
 
−
'''[[HTML5.1]]'''
 
  
 
== 문제점과 대안  ==
 
== 문제점과 대안  ==
71번째 줄: 68번째 줄:
 
* [[CORS]]를 이용한 [[CSRF]] 공격 : CORS는 서로 다른 도메인 간에도 [[Ajax]]로 요청을 주고 받을 수 있게 하는 표준이다.html5 에는  XHR level 2라는 스펙이 추가 되었는데 , 여기서  [[XHR]]이란 Ajax의 XMLHttpRequest를 줄인 말로,기존 Level 1에서는 SOP에의해 COR이 제한되었으나,이 XHR2는 COR를 가능하게 해준다,이 때 기존에 없던 'Origin' 헤더가 포함되는데,이 헤더는 COR을 발생시킨 도메인의 정보를 포함하며, 받는 도메인 측에서도 출처를 확인할 수 있도록 한다.이러한 과정에서 보안취약점이 발생하게 되는데, 이에 대한 대응을 위해서는 접근을 허용하는 발송처에 대한 설정에 주의하고 "Access-control-Allow-Origin::*"또는 "Access-control-Allow-Credentials: true"와 같은 코드 패턴은 사용해서는 안된다.
 
* [[CORS]]를 이용한 [[CSRF]] 공격 : CORS는 서로 다른 도메인 간에도 [[Ajax]]로 요청을 주고 받을 수 있게 하는 표준이다.html5 에는  XHR level 2라는 스펙이 추가 되었는데 , 여기서  [[XHR]]이란 Ajax의 XMLHttpRequest를 줄인 말로,기존 Level 1에서는 SOP에의해 COR이 제한되었으나,이 XHR2는 COR를 가능하게 해준다,이 때 기존에 없던 'Origin' 헤더가 포함되는데,이 헤더는 COR을 발생시킨 도메인의 정보를 포함하며, 받는 도메인 측에서도 출처를 확인할 수 있도록 한다.이러한 과정에서 보안취약점이 발생하게 되는데, 이에 대한 대응을 위해서는 접근을 허용하는 발송처에 대한 설정에 주의하고 "Access-control-Allow-Origin::*"또는 "Access-control-Allow-Credentials: true"와 같은 코드 패턴은 사용해서는 안된다.
  
−
*웹 워커를 이용한 DDos공격 : 브라우저는 페이지의 자바스크립트를 처리하기 위해 일반적으로 한 개의 스레드를 이용한다.이 자바스크립트를 백그라운드에서 독립적으로 실행하기 위해 HTML5에서 등장한 API가 웹 워커이다.이 떄,워커를 생성하고 메시지를 송수신 하는데, 이 특징을 이용하여 DDos에 약용할 수 있다.
+
*웹 워커를 이용한 DDos공격 : 브라우저는 페이지의 자바스크립트를 처리하기 위해 일반적으로 한 개의 스레드를 이용한다.이 자바스크립트를 백그라운드에서 독립적으로 실행하기 위해 HTML5에서 등장한 API가 웹 워커이다.이 떄,워커를 생성하고 메시지를 송수신 하는데, 이 특징을 이용하여 [[디도스]](DDoS) 공격에 약용할 수 있다.<ref>jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357 html5 보안취약점과 대응방안]〉,《네이버 블로그》, 2015-01-07
 +
</ref>
  
 
== 평가 및 전망 ==
 
== 평가 및 전망 ==
−
=== HTML5로 인한 명실상부한 One source Multi Device가 가능함에 따라 콘텐츠의 활성화 기반 마련 ===
+
; HTML5로 인한 명실상부한 One source Multi Device가 가능함에 따라 콘텐츠의 활성화 기반 마련
−
* 기존의 웹 콘텐츠의 경우, One source, One Device에 운영되었으나,
+
* 기존의 웹 콘텐츠의 경우, One source, One Device에 운영되었으나, HTML5가 적용됨에 따라 비로소 표준을 따르는 대부분의 기종(브라우저)를 수용하는 환경이 되었음
−
HTML5가 적용됨에 따라 비로소 표준을 따르는 대부분의 기종(브라
+
* 이에 따라 개발하는 콘텐츠가 다양한 화면크기, 운영체제에서도 운영될 수 있도록 통합화된 교수 전략 및 인터페이스, 내용 설계가 요구됨
−
우저)를 수용하는 환경이 되었음
+
 
−
* 이에 따라 개발하는 콘텐츠가 다양한 화면크기, 운영체제에서도 운영
+
; 웹 응용의 공통 개발 및 활용 환경 조성에 따른 프로그램의 개발, 갱신, 관리의 용이성 제고
−
될 수 있도록 통합화된 교수 전략 및 인터페이스, 내용 설계가 요구됨
+
* 웹 응용 프로그램의 공통 활용 환경이 조성됨에 따라 하나의 응용 프로그램의 활용이 이전보다 훨씬 배가됨에 따라 개발자의 수익성이 크게 증대될 수 있음
−
=== 웹 응용의 공통 개발 및 활용 환경 조성에 따른 프로그램의 개발, 갱신, 관리의 용이성 제고 ===
+
* 또한 웹 응용 프로그램의 갱신 시 One source만 수정하면 되어 이의 관리가 매우 쉬워짐
 +
 
 +
; 구글, 애플의 포털 홈페이지에서와 같이 웹 포탈의 HTML5로의 대전환 필요
 +
* 국내 대부분의 기관 홈페이지의 경우 특정 브라우저에서만 운영이 되는 한계가 있었고, 모바일의 등장에 따라 시험 수준의 특정 기종에만 운영되는 모바일 프로그램이 개발되어 적용되고 있음
 +
* 웹 포탈의 경우 점진적으로 HTML5를 도입함에 따라 Multi Device가 수용될 수 있도록 할 필요가 있음
 +
* 이를 위해서는 특정 플러그인, Active-X 등의 지양으로 웹 응용 프로그램의 중복 개발 및 노력을 절감하여 효율을 기할 필요가 있음
  
−
* 웹 응용 프로그램의 공통 활용 환경이 조성됨에 따라 하나의 응용
+
; 웹 응용의 표준화와 오픈화로 인터넷 문화의 확산 및 정보격차 가속화
−
프로그램의 활용이 이전보다 훨씬 배가됨에 따라 개발자의 수익성이
+
* 웹 응용 프로그램의 특정 브라우저, 특정 기종의 이용 환경에서 공통 이용 환경으로의 전환에 따라 웹 응용의 활성화 및 인터넷 문화의 확산이 예상됨
−
크게 증대될 수 있음
+
* 그러나 이러한 인터넷 문화에 아직 접하지 못하는 세대 및 계층과의 정보 격차가 가속화됨에 따라 이들의 생활 수준 및 의식에 많은 차이가 발생하며 통합에 장애 요인으로의 작용이 예상됨<ref>유재택, 〈[http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf 웹 표준 언어(HTML5) 동향 및 전망]〉, 《한국교육학술정보원》, 2011년</ref>
−
* 또한 웹 응용 프로그램의 갱신 시 One source만 수정하면 되어 이
 
−
의 관리가 매우 쉬워 짐
 
−
=== 구글, 애플의 포탈 홈페이지에서와 같이 웹 포탈의 HTML5로의 대 전환 필요 ===
 
−
* 국내 대부분의 기관 홈페이지의 경우 특정 브라우저에서만 운영이
 
−
되는 한계가 있었고, 모바일의 등장에 따라 시험 수준의 특정 기종
 
−
에만 운영되는 모바일 프로그램이 개발되어 적용되고 있음
 
−
* 웹 포탈의 경우 점진적으로 HTML5를 도입함에 따라 Multi Device
 
−
가 수용될 수 있도록 할 필요가 있음
 
−
* 이를 위해서는 특정 플러그인, Active-X 등의 지양으로 웹 응용 프로
 
−
그램의 중복 개발 및 노력을 절감하여 효율을 기할 필요가 있음
 
−
=== 웹 응용의 표준화와 오픈화로 인터넷 문화의 확산 및 정보격차 가속화 ===
 
−
* 웹 응용 프로그램의 특정 브라우저, 특정 기종의 이용 환경에서 공
 
−
통 이용 환경으로의 전환에 따라 웹 응용의 활성화 및 인터넷 문화
 
−
의 확산이 예상됨
 
−
* 그러나 이러한 인터넷 문화에 아직 접하지 못하는 세대 및 계층과의
 
−
정보 격차가 가속화됨에 따라 이들의 생활 수준 및 의식에 많은 차
 
−
이가 발생하며 통합에 장애 요인으로의 작용이 예상됨
 
  
 
{{각주}}
 
{{각주}}
  
 
==참고자료==
 
==참고자료==
−
*초초의 다락방, 〈[https://cho2.tistory.com/entry/HTML5%EC%9D%98-%EB%93%B1%EC%9E%A5%EB%B0%B0%EA%B2%BD/등장배경]〉,《티스토리》, 2015-01-30
+
* 초초의 다락방, 〈[https://cho2.tistory.com/entry/HTML5%EC%9D%98-%EB%93%B1%EC%9E%A5%EB%B0%B0%EA%B2%BD 등장배경]〉,《티스토리》, 2015-01-30
−
*나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5  
+
* 나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5  
−
*http://doomok.dothome.co.kr/html5/html5.html
+
* 정민권, 〈[http://doomok.dothome.co.kr/html5/html5.html HTML5의 역사]〉,《네이버 카페》, 2012년
−
*위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5
+
* 〈[https://ko.wikipedia.org/wiki/HTML5 HTML5]〉, 《위키백과》
−
*복세편살 개발 라이프, 〈[https://www.leafcats.com/99]〉
+
* 나무위키 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5
−
*likingyo, 〈[https://blog.naver.com/likingyo/221079942961]〉,《네이버》, 2017-08-22
+
* 복세편살 개발 라이프, 〈[https://www.leafcats.com/99 HTML5 탄생 배경과 HTML5의 특징]〉,《티스토리》, 2017년
−
*webclub, 〈[https://webclub.tistory.com/491]〉,《티스토리》
+
* likingyo, 〈[https://blog.naver.com/likingyo/221079942961 HTML5의 핵심적인 특징]〉,《네이버 블로그》, 2017-08-22
−
*http://www.itworld.co.kr/print/76718
+
* webclub, 〈[https://webclub.tistory.com/491 HTML5란 무엇인가?]〉,《티스토리》, 2016년
−
*jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357]〉,《네이버》, 2015-01-07
+
* jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357 html5 보안취약점과 대응방안]〉,《네이버 블로그》, 2015-01-07
−
*http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf
+
* InfoWorld, 〈[http://www.itworld.co.kr/print/76718 HTML5를 최대한 활용하기 위한 9가지 프로그래밍 도구]〉, 《아이티월드》
 +
* 유재택, 〈[http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf 웹 표준 언어(HTML5) 동향 및 전망]〉, 《한국교육학술정보원》, 2011년
  
 
== 같이 보기 ==
 
== 같이 보기 ==
 
* [[HTML]]
 
* [[HTML]]
 
* [[W3C]]
 
* [[W3C]]
 +
* [[팀 버너스-리]]
  
−
{{프로그래밍 언어|토막글}}
+
{{프로그래밍 언어|검토 필요}}
 
[[분류:퍼블리싱]]
 
[[분류:퍼블리싱]]

2021년 7월 14일 (수) 10:27 기준 최신판

HTML5
HTML5
HTML
W3C(World Wide Web Consortium)
팀 버너스-리(Tim Berners-Lee)

HTML5(에이치티엠엘 파이브)는 Hypertext Markup Language version 5의 약자로서, 기존의 HTML이 텍스트 및 하이퍼링크 위주로 표시하던 것과 달리 HTML5는 액티브엑스(Active-X)를 사용하지 않고, 오디오, 비디오, 그래픽, 기타 다양한 응용 프로그램을 웹 자체에서 구현할 수 있는 코딩 언어이다. 2014년 W3C에서 표준안을 확정했다.

개요[편집]

HTML 5는 웹 페이지를 위한 하나의 중요한 '언어'이고, 웹 표준 기관인 월드와이드웹 컨소시엄(W3C)이 만들고 있는 차세대 웹 언어 규격이다. HTML이라는 언어를 이용해서 지금의 웹 페이지의 글, 아이콘, 표, 클릭 박스 등 제작되었다고 볼 수 있다. 위와 같이 HTML 5도 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, HTML의 종류 중 하나이다. 별도 설치 없이 웹브라우저상에서 다양한 멀티미디어 콘텐츠와 앱 등을 바로 제공할 수 있다.

등장배경[편집]

처음에 등장한 것은 1989년 팀 버너스리(Tim Berners-Lee)가 인터넷을 기반으로 한 하이퍼미디어의 초기 모델을 설계하고 1990년에 HTTP,HTML의 스펙을 제안한 것이 시작이 되었다. 기존의 터미널이나 텔넷 과 같은 텍스트 기반의 정보 수집에서 벗어나 웹과 브라우져를 통한 정보 수집이 새로운 이슈가 되면서 인터넷 기반으로 텍스트 뿐만 아니라, 이미지, 오디오, 다양한 오브젝트들을 보여주기 위한 목적으로 1993년 처음 탄생하게 되었다.HTML (Hyper Text Markup Language)은 SGML이라는 과학기술문서를 구조적으로 표현하기 위한 마크업 언어에서 파생된 언어로 웹에서 여러 가지 컨텐츠들을 보여주기 위하여 등장했던 언어로 GUI기반의 PC통신 기술인 넷츠케이프,익스플로어가 등장하면서 크게 관심을 받기 시작하였고 기본적으로 <html>의 여는 태그와 </html>의 닫는 태그로 둘러쌓이는 형식을 취하고 있으며, 그 안의 컨텐츠들도 이러한 여러 가지 태그들로 둘러쌓여서 브라우져에서 뿌려지게 된다. 1990년대 공급자 기반의 홈페이지를 작성할 때 웹페이지를 구조적으로 표현함에 있어서 사용하기 편리하고 당시의 기술로는 유저가 판단하기에 심미성이 뛰어나 많은 곳에서 활용되었지만 HTML3.x버젼으로 업데이트된 시점에서 HTML만으로는 표현하기에는 제한사항이 발생되어 필요한 태그를 사용자가 직접 정의할 수 있는 XML이 생겨나게 되었고 XML은 HTML이 고정된 태그만을 사용가능하다면 DTD라는 XML 스키마를 정의함으로 인해 사용자가 직접 태그를 작성하게 할 수 있게 함으로써 HTML에서 확장성을 강조했다. 이에 XML과 HTML을 융합한 XHTML이 등장하게 되었는데 W3C는 HTML의 개발을 중지하고 XHTML을 표준으로 지정하려는 움직임이 일게 되는데 이미 HTML사용에 익숙해진 사용자들(개발자,디자이너)과 브라우져 공급자들은 XHTML보다 HTML을 더욱 발전시키는 쪽이 더 나을것이라는 생각을 가지고 W3C의 생각과는 정면으로 대치하게 된다. 이에 독립적으로 HTML을 발전시키위해 Apple,Mozilla,Opera는 WHATWG라는 워킹그룹을 발촉하게 되고 이에 W3C는 WHATWG를 정식 W3C워킹그룹으로 인정받고 XHTML의 개발을 중지하면서 HTML을 업데이트 하게 되는데 이것이 현재 HTML5가 되었다.[1]

역사[편집]

HTML5 표준화 일정

  • 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범> / Web Form 2.0, Web Applications 1.0
  • 2007.03 : 새로운 HTML 워킹 그룹 생성
  • 2007.05 : HTML5와 Web Forums 2.0 스펙 채택 - 리뷰 기반으로
  • 2007.11 : HTML5 디자인 원칙 작업 초안
  • 2009.10 : W3C에서 XHTML 전환 실패를 인정함
  • 2010.01 : HTML5 Last Call 작업 초안
  • 2010.08 : HTML5 Working Draft 공개
  • 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
  • 2012.02 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
  • 2014.01 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
  • 2014.02 : HTML5 최종 표준안 (Recommendation)
  • 2016.11 : HTML5의 버전업인 HTML5.1이 최신 표준으로 지정되었다.
  • 2017.12 : HTML5.1의 버전업인 HTML5.2가 최신 표준으로 지정되었다. 또한 HTML5.3이 워킹 드래프트 단계에 돌입했다.[2][3][4]

특징[편집]

HTML 5는 이전 HTML 보다 동시에 많은 작업을 할 수 있다. HTML 5는 다른많은 부가 기능을 제공함으로써 다른 외부 Active-X와 같은 plug-ins 를 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가 되 었고 기존의 웹 문서에서는 HTML만으로 웹 서비스를 구성하는 것이 불가능하였지만 HTML5로 넘어오면서 클라이언트와 서버와의 통신이 가능하게 되었다. 이로 인해 인터넷 브라우저상에서 화려한 그래픽 효과를 구현하며, 음악ㆍ동영상을 자유롭게 감상할 수 있고 그래픽 처리, 위치정보 제공 등 다양한 기능을 제공함으로써, 웹 자체에서 처리할 수 있는 기능이 대폭 향상되었다.

HTML5의 주요기능[편집]

  • 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 가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.
  • 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
  • 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
  • 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.[5][6][7]

활용[편집]

HTML5는 개발자들 사이에서 최신 웹 애플리케이션을 만들 데에도 활용되고 있다. HTML5를 지원하고 활용한 대표적인 프로그램으로는 어도비 엣지(Adobe Edge), 어도비 드림위버 CS6, 어도비 콜드퓨전 10, 센차 아키텍트 2(sencha Architect 2). 센차 터치 2(Sencha Touch 2), 도조 파운데이션 마케타(Dojo Foundation Maqetta), 마이크로소프트 비주얼 스튜디오 2010 서비스 팩 1, 젯브레인스 웹스톰 4.0(JetBrains WebStorm 4.0), 구글 웹 툴킷 등등 HTML5를 활용한 프로그램들이 점점 더 많아지고 있으며 다양한 웹사이트에서 또한 활용되고 있다. 이에 따라 애플ㆍ마이크로소프트(MS), 구글, 페이스북 등 글로벌 IT 기업들은 HTML5 시대 주도권을 잡고 활용하기 위해 치열한 경쟁에 돌입하기도 했다.[8]

종류(버전)[편집]

  • HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다.
  • HTML5.1은 기본 HTML5에 버그를 고치고 추가기능을 포함한 업그레이드 버전이다.[9]

문제점과 대안[편집]

HTML5의 문제점을 꼽자면 보안에 관한 이야기가 많이 나온다. 아래는 보안 취약점과 그 대응 방안이다.

  • 추가된 속성 및 태그를 이용한 XSS 공격 : HTML5에서 새로 추가된 태그와 기존 Form 태그에 추가된 신규 속성에 대하여 공격이 가능하다. 이에 대한 대응을 위해서는 공격 가능 항목에 대한 테스트와 점검 목록의 지속적인 업데이트가 필요하다.
  • CORS를 이용한 CSRF 공격 : CORS는 서로 다른 도메인 간에도 Ajax로 요청을 주고 받을 수 있게 하는 표준이다.html5 에는 XHR level 2라는 스펙이 추가 되었는데 , 여기서 XHR이란 Ajax의 XMLHttpRequest를 줄인 말로,기존 Level 1에서는 SOP에의해 COR이 제한되었으나,이 XHR2는 COR를 가능하게 해준다,이 때 기존에 없던 'Origin' 헤더가 포함되는데,이 헤더는 COR을 발생시킨 도메인의 정보를 포함하며, 받는 도메인 측에서도 출처를 확인할 수 있도록 한다.이러한 과정에서 보안취약점이 발생하게 되는데, 이에 대한 대응을 위해서는 접근을 허용하는 발송처에 대한 설정에 주의하고 "Access-control-Allow-Origin::*"또는 "Access-control-Allow-Credentials: true"와 같은 코드 패턴은 사용해서는 안된다.
  • 웹 워커를 이용한 DDos공격 : 브라우저는 페이지의 자바스크립트를 처리하기 위해 일반적으로 한 개의 스레드를 이용한다.이 자바스크립트를 백그라운드에서 독립적으로 실행하기 위해 HTML5에서 등장한 API가 웹 워커이다.이 떄,워커를 생성하고 메시지를 송수신 하는데, 이 특징을 이용하여 디도스(DDoS) 공격에 약용할 수 있다.[10]

평가 및 전망[편집]

HTML5로 인한 명실상부한 One source Multi Device가 가능함에 따라 콘텐츠의 활성화 기반 마련
  • 기존의 웹 콘텐츠의 경우, One source, One Device에 운영되었으나, HTML5가 적용됨에 따라 비로소 표준을 따르는 대부분의 기종(브라우저)를 수용하는 환경이 되었음
  • 이에 따라 개발하는 콘텐츠가 다양한 화면크기, 운영체제에서도 운영될 수 있도록 통합화된 교수 전략 및 인터페이스, 내용 설계가 요구됨
웹 응용의 공통 개발 및 활용 환경 조성에 따른 프로그램의 개발, 갱신, 관리의 용이성 제고
  • 웹 응용 프로그램의 공통 활용 환경이 조성됨에 따라 하나의 응용 프로그램의 활용이 이전보다 훨씬 배가됨에 따라 개발자의 수익성이 크게 증대될 수 있음
  • 또한 웹 응용 프로그램의 갱신 시 One source만 수정하면 되어 이의 관리가 매우 쉬워짐
구글, 애플의 포털 홈페이지에서와 같이 웹 포탈의 HTML5로의 대전환 필요
  • 국내 대부분의 기관 홈페이지의 경우 특정 브라우저에서만 운영이 되는 한계가 있었고, 모바일의 등장에 따라 시험 수준의 특정 기종에만 운영되는 모바일 프로그램이 개발되어 적용되고 있음
  • 웹 포탈의 경우 점진적으로 HTML5를 도입함에 따라 Multi Device가 수용될 수 있도록 할 필요가 있음
  • 이를 위해서는 특정 플러그인, Active-X 등의 지양으로 웹 응용 프로그램의 중복 개발 및 노력을 절감하여 효율을 기할 필요가 있음
웹 응용의 표준화와 오픈화로 인터넷 문화의 확산 및 정보격차 가속화
  • 웹 응용 프로그램의 특정 브라우저, 특정 기종의 이용 환경에서 공통 이용 환경으로의 전환에 따라 웹 응용의 활성화 및 인터넷 문화의 확산이 예상됨
  • 그러나 이러한 인터넷 문화에 아직 접하지 못하는 세대 및 계층과의 정보 격차가 가속화됨에 따라 이들의 생활 수준 및 의식에 많은 차이가 발생하며 통합에 장애 요인으로의 작용이 예상됨[11]

각주[편집]

  1. ↑ 초초의 다락방, 〈등장배경〉,《티스토리》, 2015-01-30
  2. ↑ 나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5
  3. ↑ 정민권, 〈HTML5의 역사〉,《네이버 카페》, 2012년
  4. ↑ 위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5
  5. ↑ 복세편살 개발 라이프, 〈HTML5 탄생 배경과 HTML5의 특징〉,《티스토리》, 2017년
  6. ↑ likingyo, 〈HTML5의 핵심적인 특징〉,《네이버 블로그》, 2017-08-22
  7. ↑ webclub, 〈HTML5란 무엇인가?〉,《티스토리》, 2016년
  8. ↑ InfoWorld, 〈HTML5를 최대한 활용하기 위한 9가지 프로그래밍 도구〉, 《아이티월드》
  9. ↑ 나무위키 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5
  10. ↑ jvioonpe, 〈html5 보안취약점과 대응방안〉,《네이버 블로그》, 2015-01-07
  11. ↑ 유재택, 〈웹 표준 언어(HTML5) 동향 및 전망〉, 《한국교육학술정보원》, 2011년

참고자료[편집]

같이 보기[편집]


  검수요청.png검수요청.png 이 HTML5 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.  

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인
프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈
개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백
코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트
프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수
명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while
디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴
프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨
위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반
원본 주소 "http://wiki1.kr/index.php?title=HTML5&oldid=470762"