HTML5 편집하기
편집을 되돌릴 수 있습니다.
이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 저장해주세요.
| 최신판 | 당신의 편집 | ||
| 1번째 줄: | 1번째 줄: | ||
| − | + | '''HTML5'''(에이치티엠엘 파이브)는 Hypertext Markup Language version 5의 약자로서, 기존의 [[HTML]]이 [[텍스트]] 및 [[하이퍼링크]] 위주로 표시하던 것과 달리 HTML5는 [[액티브 엑스]](Active-X)를 사용하지 않고, 오디오, 비디오, 그래픽, 기타 다양한 응용 프로그램을 웹 자체에서 구현할 수 있는 코딩 언어이다. 2014년 [[W3C]]에서 표준안을 확정했다. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | '''HTML5'''(에이치티엠엘 파이브)는 Hypertext Markup Language version 5의 약자로서, 기존의 [[HTML]]이 [[텍스트]] 및 [[하이퍼링크]] 위주로 표시하던 것과 달리 HTML5는 [[ | ||
== 개요 == | == 개요 == | ||
| − | HTML 5는 웹 페이지를 위한 하나의 중요한 '언어' | + | HTML 5는 'HyperText Markup Language 5'의 약자로, 웹 페이지를 위한 하나의 중요한 '언어'이다. |
| − | 웹 표준 기관인 월드와이드웹 컨소시엄([[W3C]])이 만들고 있는 차세대 웹 언어 규격이다. HTML이라는 언어를 이용해서 지금의 웹 페이지의 글, 아이콘, 표, 클릭 박스 등 제작되었다고 볼 수 있다. 위와 같이 HTML 5도 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, HTML의 종류 중 하나이다. 별도 설치 없이 웹브라우저상에서 다양한 멀티미디어 콘텐츠와 앱 등을 바로 제공할 수 있다. | + | 웹 표준 기관인 월드와이드웹 컨소시엄([[W3C]])이 만들고 있는 차세대 웹 언어 규격이다. HTML이라는 언어를 이용해서 지금의 웹 페이지의 글, 아이콘, 표, 클릭 박스 등 제작되었다고 볼 수 있다. |
| + | 위와 같이 HTML 5도 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, HTML의 종류 중 하나이다. 별도 설치 없이 웹브라우저상에서 다양한 멀티미디어 콘텐츠와 앱 등을 바로 제공할 수 있다. | ||
== 등장배경 == | == 등장배경 == | ||
| 16번째 줄: | 11번째 줄: | ||
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> |
== 역사 == | == 역사 == | ||
| 32번째 줄: | 27번째 줄: | ||
* 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이 워킹 드래프트 단계에 돌입했다.<ref>나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5 </ref><ref> | + | * 2017.12 : HTML5.1의 버전업인 HTML5.2가 최신 표준으로 지정되었다. 또한 HTML5.3이 워킹 드래프트 단계에 돌입했다. |
| + | <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> | ||
== 특징 == | == 특징 == | ||
| 52번째 줄: | 50번째 줄: | ||
* 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다. | * 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다. | ||
* 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다. | * 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다. | ||
| − | * 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.<ref>복세편살 개발 라이프, 〈[https://www.leafcats.com/99 | + | * 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다. |
| + | <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 시대 주도권을 잡고 활용하기 위해 치열한 경쟁에 돌입하기도 했다.<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 시대 주도권을 잡고 활용하기 위해 치열한 경쟁에 돌입하기도 했다. |
| + | |||
| + | <ref>http://www.itworld.co.kr/print/76718</ref> | ||
== 종류(버전) == | == 종류(버전) == | ||
| − | + | ||
| − | + | '''[[HTML5]]''' | |
| + | |||
| + | '''[[HTML5.1]]''' | ||
== 문제점과 대안 == | == 문제점과 대안 == | ||
| 68번째 줄: | 73번째 줄: | ||
* [[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공격 : 브라우저는 페이지의 자바스크립트를 처리하기 위해 일반적으로 한 개의 스레드를 이용한다.이 자바스크립트를 백그라운드에서 독립적으로 실행하기 위해 HTML5에서 등장한 API가 웹 워커이다.이 떄,워커를 생성하고 메시지를 송수신 하는데, 이 특징을 이용하여 DDos에 약용할 수 있다. |
| − | </ref> | + | <ref>*jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357]〉,《네이버》, 2015-01-07</ref> |
== 평가 및 전망 == | == 평가 및 전망 == | ||
| − | + | === HTML5로 인한 명실상부한 One source Multi Device가 가능함에 따라 콘텐츠의 활성화 기반 마련 === | |
| − | * 기존의 웹 콘텐츠의 경우, One source, One Device에 운영되었으나, HTML5가 적용됨에 따라 비로소 표준을 따르는 대부분의 기종( | + | * 기존의 웹 콘텐츠의 경우, One source, One Device에 운영되었으나, |
| − | * 이에 따라 개발하는 콘텐츠가 다양한 화면크기, 운영체제에서도 | + | HTML5가 적용됨에 따라 비로소 표준을 따르는 대부분의 기종(브라 |
| − | + | 우저)를 수용하는 환경이 되었음 | |
| − | + | * 이에 따라 개발하는 콘텐츠가 다양한 화면크기, 운영체제에서도 운영 | |
| − | + | 될 수 있도록 통합화된 교수 전략 및 인터페이스, 내용 설계가 요구됨 | |
| − | + | === 웹 응용의 공통 개발 및 활용 환경 조성에 따른 프로그램의 개발, 갱신, 관리의 용이성 제고 === | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | * 웹 응용 프로그램의 공통 활용 환경이 조성됨에 따라 하나의 응용 | ||
| + | 프로그램의 활용이 이전보다 훨씬 배가됨에 따라 개발자의 수익성이 | ||
| + | 크게 증대될 수 있음 | ||
| + | * 또한 웹 응용 프로그램의 갱신 시 One source만 수정하면 되어 이 | ||
| + | 의 관리가 매우 쉬워 짐 | ||
| + | === 구글, 애플의 포탈 홈페이지에서와 같이 웹 포탈의 HTML5로의 대 전환 필요 === | ||
| + | * 국내 대부분의 기관 홈페이지의 경우 특정 브라우저에서만 운영이 | ||
| + | 되는 한계가 있었고, 모바일의 등장에 따라 시험 수준의 특정 기종 | ||
| + | 에만 운영되는 모바일 프로그램이 개발되어 적용되고 있음 | ||
| + | * 웹 포탈의 경우 점진적으로 HTML5를 도입함에 따라 Multi Device | ||
| + | 가 수용될 수 있도록 할 필요가 있음 | ||
| + | * 이를 위해서는 특정 플러그인, Active-X 등의 지양으로 웹 응용 프로 | ||
| + | 그램의 중복 개발 및 노력을 절감하여 효율을 기할 필요가 있음 | ||
| + | === 웹 응용의 표준화와 오픈화로 인터넷 문화의 확산 및 정보격차 가속화 === | ||
| + | * 웹 응용 프로그램의 특정 브라우저, 특정 기종의 이용 환경에서 공 | ||
| + | 통 이용 환경으로의 전환에 따라 웹 응용의 활성화 및 인터넷 문화 | ||
| + | 의 확산이 예상됨 | ||
| + | * 그러나 이러한 인터넷 문화에 아직 접하지 못하는 세대 및 계층과의 | ||
| + | 정보 격차가 가속화됨에 따라 이들의 생활 수준 및 의식에 많은 차 | ||
| + | 이가 발생하며 통합에 장애 요인으로의 작용이 예상됨 | ||
| + | <ref>*http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf</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 | + | *초초의 다락방, 〈[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 |
| − | * | + | *위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5 |
| − | + | *복세편살 개발 라이프, 〈[https://www.leafcats.com/99]〉 | |
| − | * 복세편살 개발 라이프, 〈[https://www.leafcats.com/99 | + | *likingyo, 〈[https://blog.naver.com/likingyo/221079942961]〉,《네이버》, 2017-08-22 |
| − | * likingyo, 〈[https://blog.naver.com/likingyo/221079942961 | + | *webclub, 〈[https://webclub.tistory.com/491]〉,《티스토리》 |
| − | * webclub, 〈[https://webclub.tistory.com/491 | + | *http://www.itworld.co.kr/print/76718 |
| − | * jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357 | + | *jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357]〉,《네이버》, 2015-01-07 |
| − | * | + | *http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf |
| − | |||
== 같이 보기 == | == 같이 보기 == | ||
* [[HTML]] | * [[HTML]] | ||
* [[W3C]] | * [[W3C]] | ||
| − | |||
| − | {{프로그래밍 언어| | + | {{프로그래밍 언어|토막글}} |
[[분류:퍼블리싱]] | [[분류:퍼블리싱]] | ||
