Drawing Dream on the Canvas

추천정보

앞서 설명한 웹표준 HTML5의 개념과 특징, 주요기능, 앞으로의 전망에 대해 알아보도록 하겠다.

HTML5의 개념 및 특징                                                                                                                                                                          

차세대 웹 표준으로 확정(2014년 10월 28일) 되었으며, 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까

지 표현,제공하도록 진화한 “웹 프로그래밍 언어”이다. 예를 들어, 오디오, 비디오, 그래픽처리, 위치정보 제공 등 다양한 기능을 제공함으로써, 

웹 자체에서 처리할 수 있는 기능이 대폭 향상되었다.

HTML5의 주요기능                                                                                                                                                                                

• 3D, Graphics & Effects 다양한 2차원 및 3차원 그래픽 기능을 지원
• Connectivity 웹(클라이언트)에서 서버측과 직접적인 양방향 통신 지원
• CSS3 글씨체, 색상, 배경 등 다양한 스타일 및 Effects 기능 제공
• Device Access 카메라, 동작센서 등의 HW 기능을 웹에서 직접적으로 제어
• Multimedia 비디오 및 오디오 기능을 자체적으로 지원
• Offline & Storage 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
• Performance & Integration GPS 없이도 단말기의 지리적인 위치정보 제공
• Semantics 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

HTML5 시장 전망                                                                                                                                                                                  

 HTML5는 현재 웹 브라우저 기업을 비롯한 글로벌 업체들은 오디오, 비디오, 그래픽 등 표준화가 많이 진행된 기능을 중심으로 HTML5를 적극

적으로 도입하고 있다.

1. 모바일 단말

미국 시장조사기관인 Strategy Analytics는 전 세계적으로 HTML5를 지원하는 모바일 단말이 2009년 3백만 대에서 2016년 15억 6000만대로 

크게 늘어날 것으로 전망하였고, 15억 6000만이라는 수치는 전체 단말 중 85%에 달한다.

2. 모바일 웹/앱

모바일 애플리케이션 시장은 2011년 56억불에서 2015년 375억불로, 국내에서는 2011년 1.4조원에서 2015년 3.5조원으로 성장할 것이며, 

2017년에는 HTML5 기반의 모바일 웹이 모바일 앱을 넘어설 것으로 전망하였다.(ETRI)

HTML5의 영향                                                                                                                                                                                      

표준 웹 환경의 확산

멀티미디어를 비롯한 확장 기능들을 지원하기 위해서 이루어지고 있는 비표준 인터넷 웹 환경이 점차 해소될 전망이다.

개방형 생태계로의 변화

개방된 웹 상에서 다양한 애플리케이션을 구현하고, 이를 누구나 브라우저로 접근할 수 있으므로, 애플 및 구글 등 OS플랫폼에 대한 의존

이 감소될 수 있다.

이용자 선택권의 강화

이용자의 경우, 인터넷에만 접속하면 스마트폰, 태블릿 PC, PC등 기기는 물론 애플이나 구글 등 벤더에 상관없이 S/W나 콘텐츠 등을 이용

가능하다.

(참고자료 : http://www.koreahtml5.kr/)

추천정보

공부도 다시 할겸 웹 기술에대해 기초부터 정리해 볼까 한다. 첫번째로 웹 표준에 대해 알아보자. 웹 표준이라는 말이 나온지는 꽤 되었

다. W3C에서 HTML5로 표준을 정하면서 웹 표준이라는 말이 등장하였으며, 현재 다양한 분야에서 웹 표준 기술이 사용되고 있다. 비 전공

자도 알 정도면... 말다했지? 

웹 표준의 의미를 살펴보면 다음과 같다. 

 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 

하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 이러한 것들 모두 "웹 표준"이라고 부르지만 

웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있

다. 더 넓은 뜻의 웹 표준은 다음을 이룬다: 

• W3C (World Wide Web Consortium)

• 국제 인터넷 표준화 기구 (IETF)가 출판한 인터넷 표준 (STD) 문서

• 국제 인터넷 표준화 기구 (IETF)가 출판한 RFC (Request for Comments) 문서

• 국제 표준화 기구(ISO)가 출판한 표준들

• Ecma 인터내셔널 (이전 이름은 ECMA)이 출판한 표준들

• 유니코드 컨소시엄이 출판한 유니코드 표준과 다양한 유니코드 기술 보고서 (UTR)

• 인터넷 할당 번호 기관 (IANA)이 운영하는 이름과 번호 레지스트리

 웹 표준의 일반적인 이용                          

웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 

것을 뜻한다. HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 한다. 웹 표준을 논할 때 일반적으로 다음의 것들이 중요성이 있

는 것으로 보인다:

HTML, XHTML, SVG, XForms와 같은 마크업 언어의 W3C 권고

스타일시트, 특히 CSS의 W3C 권고

흔히 자바스크립트나 ECMA스크립트로 불리는 Ecma 인터내셔널 표준

문서 객체 모델의 W3C 권고

웹 접근성은 일반적으로 W3C의 Web Accessibility Initiative가 출판한 웹 콘텐츠 접근성 가이드라인에 기반을 두고 있다.

(출처 : 위키백과)

 HTML5에서 새롭게 추가된 기능                                                                                                                                    

<태그>

구조 기술을 위한 태그

• section: 문서의 섹션을 의미하며 문서의 구조를 기술하기 위해서 h1, h2, h3, h4, h5, h6 요소를 함께 사용해야 한다.

• article: 블로그 글이나 신문 기사와 같이 독립적인 문서를 의미한다.

• main: HTML5, HTML5.1에서는 한 문서에 하나만 쓸 수 있으며 페이지의 본문같이 주요 내용을 포함하는 요소로 사용할 수 있다.

• aside: 본문페이지와 연관이 작은 추가적인 콘텐츠를 의미한다.

• hgroup: 섹션의 헤더를 의미한다.

• header: 소개나 네비게이션 영역을 나타낸다.

• footer: 섹션의 푸터를 의미하며 저자나 저작권등의 정보를 표시한다.

• nav: 네비게이션을 위한 섹션을 의미한다.

• figure: 본문에서 참조할 수 있는 독립적인 사진과 같은 콘텐츠를 의미한다. figcaption 요소를 선택적으로 캡션으로 사용할 수 있다.

• template: 스크립트에서 활용할 수 있는 HTML 조각을 선언하는데 사용한다.

새로운 용도를 위한 태그

• video, audio: 멀티미디어 콘텐츠를 사용하기위한 요소이고 API를 제공하여 콘텐츠를 제어할 수 있도록 하고 있다. 브라우저도 제어를 위한 인터페이스를 제공한다. 여러 타입의 원본을 제공하려면 source 요소를 이용할 수 있다.

• track: video 요소의 텍스트 트랙을 나타낸다.

• embed: 플러그인 콘텐츠를 표현한다.

• mark: 참조를 위한 표시를 하기 위해 사용한다.

• progress: 진행상황을 표기하기 위해 사용한다.

• meter: 측정값을 표시하기 위해 사용한다.

• time: 날짜나 시간을 표시하기 위해 사용한다.

• ruby, rt, rp: 루비 표현을 위해 사용한다.

• bdi: 좌에서 우, 우에서 좌로 기술되는 언어를 표기할 때 사용한다.

• wbr: 개행을 할 수 있다는 표시를 할 때 사용한다.

• canvas: 비트맵 그래픽을 표현하기 위해서 사용한다.

• summary 요소를 사용해서 요약이나 범례, 캡션을 나타낼 수 있다.

• datalist: input 요소의 list 속성으로 연결해서 콤보박스를 표현한다.

• keygen: 생성된 키 쌍을 나타낸다.

• output: 출력내용을 표현한다.

input 요소에 추가된 속성

• tel: 전화번호

• search: 검색

• url: 웹 주소

• email: 이메일

• date: 날짜

• time: 시간

• number: 숫자

• range: 범위

• color: 색상

HTML5에서 변경된 요소

• address: 가장 가까운 article이나 body 조상 요소로 범위가 정해진다.

• b: 강조의 의미는 사라지고 주목해야 할 단어를 표기하도록 변경되었다.

• blocquote: 여전히 다른 출처의 인용을 의미하고 footer나 cite로 인용을 표시할 수 있다.

• dl: 이름-값 그룹을 나타내는데 사용된다. 대화 목록을 기술하는데에는 더 이상 적합하지 않다.

• hr: 문단 수준의 주제 구분에 사용된다.

• i: 다른 분위기나 어조, 보통의 서술과 구분되어야 하는 텍스트를 지칭할 때 사용한다.

• label: 레이블을 클릭했을 때 포커스를 이동하는 기능이 플랫폼의 표준 인터페이스와 다를 경우 브라우저가 더 이상 포커스를 이동시키지 않는다.

• noscript: 더 이상 직전 script 요소와 연관되지 않는다.

• s: 정확하지 않거나 관련이 없는 내용을 나타낸다.

• script: 스트립트나 커스텀 데이터를 넣기위한 용도로 사용된다.

• small: 작게 출력해야 하는 사이드 코멘트를 나타낸다.

• strong: 강한 강조보다는 중요함을 나타낸다.

• u: 불충분한 내용을 나타내는데 사용된다.

HTML5에서 변경된 속성

• alt: 보다 정교하게 기술될 필요가 있고 생략도 가능하다.

• accept: input 요소에서 사용될 때 audio/*나 video/*, image/*를 사용할 수 있다.

• accesskey: 브라우저가 선택할 수 있도록 여러 문자를 할당할 수 있게 되었다.

• action: form에 사용할 때 빈 URL을 사용할 수 없다.

• border: table 요소에 사용될 때 1과 빈문자만 사용할 수 있다.

• colspan: th와 td 요소에 사용될 때 0보다 커야한다.

• coords: 원형인 area 요소에 사용될 때 더이상 퍼센트 단위를 넣을 수 없다.

• data: object에 사용될 때 더이상 codebase 속성과 관련이 있지 않다.

• defer: script 요소에 사용하면 스크립트가 페이지 파싱이 끝난 후에 실행된다.

• dir: auto 값을 쓸 수 있다.

• enctype: form 요소에 사용할 때 text/plain을 값을 쓸 수 있다.

• width, height: img, iframe, object 요소에 사용할 때 퍼센트 값을 사용할 수 없다. 이미지의 비율을 변경하는 용도로 사용할 수 없다.

• href: link 요소에 사용할 때 더이상 빈 URL을 사용할 수 없다.

• href: base 요소에 사용할 때 상대 URL을 사용할 수 있다.

• URL을 값으로 같는 모든 속성: 문서의 인코딩이 UTF-8이나 UTF-16이면 IRI를 사용할 수 있다.

• http-equiv: meta 요소에 사용될 때 더이상 HTTP 서버에 의해서 참조되지 않고 브라우저에 의해서만 참조된다.

• id: 단일하기만 하고 빈값만 아니면 어떤 값이든 다 사용할 수 있고 빈문자는 허용되지 않는다.

• lang: 빈 문자열을 사용할 수 있다.

• media: link 요소에 사용할 때 미디어 쿼리 목록을 사용할 수 있고 기본값은 all이다.

• 이벤트 핸들러: 스크립트 언어로 JavaScript를 항상 사용한다.

• value: li 요소에서 더이상 폐지되지 않았고 표현을 나타내지 않는다. start, type도 ol 요소에서 더이상 페지되지 않았고 표현을 나타내지 않는다.

• style: 스타일 언어로 CSS를 항상 사용한다.

• tabindex: 음수값을 지정할 경우 포커스는 갈 수 있지만 탭으로 가지 못함을 의미한다.

• taget: a와 area 요소에서 더이상 폐지되지 않았다.

• type: JavaScript와 CSS를 사용할 경우 script와 style 요소에서 더이상 필수 속성이 아니다.

• usemap: img 요소에 사용할 때 더이상 URL을 사용하지 않고 map 요소로의 유효한 해쉬-이름 참조 값을 사용한다.

웹을 공부하는 학생, 혹은 웹퍼블리셔, 디자이너 등과 같은 직업을 갖고 있는 사람이라면 HTML4, 4.xx.... 버전에 HTML5 표준안이 채택되

면서 바뀐 내용을 파악하고 적용해야 할 것이며, 웹표준 부합하는 페이지를 설계 개발할 수 있어야 할 것이다.