HTML 5

CHAPTER 01  1.2

HTML5 추가기능

1.2  HTML5 추가 기능 

컴퓨터를 사용하면서 가장 많이 사용하는 프로그램은 무엇인가요? 모두 웹 브라우저를 선택했을 것입니다. 

그리고 음악 재생 프로그램과 동영상 재생 프로그램 또는 워드프로세서와 게임이 자주 사용하는 프로그램일 것입니다. 


만약 웹 브라우저에서 음악 재생과 동영상 재생은 물론 온라인 게임까지 된다면 어떤 일이 발생할까요? 

아마도 다른 프로그램은 필요 없어질 것입니다.  HTML5는 이러한 프로그램을 개발 할수 있는 기능을 모두 추가 했습니다. 

1.2.1  멀티미디어

기존에는 웹 페이지가 스스로 동영상이나 음악을 재생할 수 없었습니다.  


' 저는 유튜브에서 동영상을 봤어요!'


잘 살펴보면 HTML 웹 표준에 따라서 동영상을 재생하는 것이 아니라 플래시를 사용합니다. 하지만 HTML5는 플러그인의 도움 없이 스스로 음악과 동영상을 재생할수 있습니다. 


스마트폰은 대부분 HTML5를 지원하므로 플래시의 도움 없이 동영상을 재생할 수 있습니다. 

아직 데스크탑의 웹 브라우저는 HTML5 멀티미디어를 지원하지 않는 인터넷 익스플로러 8 이전의 웹 브라우저가 많으므로 플래시를 사용하고 있습니다. 하지만 유튜브의 경우는 벌써 HTML5 멀티미디어 기능을 제공하고 있습니다. 

1.2.2 그래픽

HTML5는 하드웨어의 가속을 받아서 2차원 그래픽과 3차원 그래픽을 구현 할수 있습니다. HTML5는 2차원 그래픽을 구현하려고 다음 2가지 방법을 추가했습니다. 


1. SVG태그를 사용한 2차원 백터 그래픽 구현 

2. 자바스크립트 캔버스를 사용한 2차원 래스터 그래픽 구현


또한 HTML5에서 3차원 그래픽을 구현하는 방법은 크게 다음과 같은 2가지로 구분할 수 있습니다. 


1. CSS3를 사용한 3차원 구현

2. 자바스크립트 WebGL을 사용한 3차원 구현


1.2.3 통신

HTML5는 서버와 소켓 통신을 할 수 있습니다. 지금까지의 HTML페이지는 서버에 요청을 하고 서버에서 데이터를 받아오는 단방향 방식으로 구현되었습니다만,

HTML5는 실시간으로 서버와 양방향 통신을 수행할 수 있습니다. 따라서 웹에서 실시간 채팅이나 실시간 온라인 게임을 즐길수 있습니다. 

NOTE. 

HTML5 이전에도 서버와 양방향 통신을 하는 것처럼 보이게 만드는 기술이 있었습니다. 이를 폴링과 롱 폴링이라고 부르는데 서버에 과부화가 가는 기술입니다.

1.2.4 장치 접근

HTML5는 장치에 접근해 장치의 정보와 기능을 사용할 수 있습니다. 무슨 말인지 이해하기 힘들 수 있는데요. 예를 들어 HTML5는 스마트폰의 배터리 잔량과 같은 정보를 가져올수 있습니다. 또한 스마트폰의 기능인 GPS를 사용하거나 진동 벨을 울릴수도 있습니다. 

현재는 별도의 SDK를 사용해 내장 기능을 사용하지만 장치 접근과 관련된 표준이 완벽하게 제정되면 일반 웹 브라우저에서도 장치에 접근해 내장된 기능을 사용할 수 있게 될 것입니다. 

1.2.5 오프라인 및 저장소

HTML5는 인터넷이 연결되지 않은 상태에서도 애플리케이션이 동작 할수 있습니다. 인터넷이 있지 않아도 웹 페이지를 사용할수 있다는것은 HTML5를 애플리케이션의 중심으로 사용하는 운영체제가 등장할수 있음을 의미합니다. 


EX) 구글 크롬에서 제공하는 Gmail 오프라인입니다. 인터넷이 연결되지 않아도 애플리케이션을  실행할수 있으며 현재까지 받은 메일을 저장소에 별도로 저장해서 읽을수도 있습니다.  이외에도 구글 크롬 스토어에 가면 인터넷이 연결되지 않아도 즐길수 있는 게임이 굉장히 많습니다. 

따라서 HTML5는 웹에서만 작동하는 것이 아니라 웹을 벗어난 곳에서도 작동할수 있습니다. 

1.2.6 HTML5 시멘틱 태그

HTML5 시멘틱 태그는 HTML5에서 새로 추가된 태그입니다. 시멘틱태그는 시멘틱 웹을 구현하려고 만들어진 태그입니다. 시멘틱 웹이란 검색 엔진 같은 프로그램이 정보의 의미를 분석하고 자료를 검색 및 처리하여 제공하는 지능형 웹을 의미합니다. 

NOTE. 

시멘틱은 사전적으로 '의미론적인'이라는 뜻입니다.

1.2.7 HTML5 시멘틱 태그

HTML5는 CSS3 스타일시트를 완벽하게 지원합니다. CSS3 스타일시트를 사용하면 3차원 변환은 물론 애니메이션 효과를 적용할수 있습니다. 

1.2.8 성능 및 통합

HTML5는 추가 기능을 사용해서 웹의 성능을 극대화할 수 있습니다. 예를 들어 웹 워커를 사용하면 사용자의 화면이 멈추는 일 없이 연산을 처리할수 있습니다. 










[출처]: BOOK 제목: 모던 웹 디자안을 위한 HTML5+CSS3입문(개정판) 펴낸곳:한빛미디어 작가: 윤인성 펴낸이: 김태헌  

페이스북
카카오톡
네이버 블로그
floating-button-img