[HTML5 강의] 1. HTML5 시작하기

HTML5강의를 시작하게 된 하늘과 나입니다.

오늘부터 하나씩 HTML5 강의를 시작할 텐데요. HTML5에 대해서 배워보고 싶은 분들과 HTML5가 뭐지 하는 분들에게 조금이나마 도움이 되어 드리고자 시작하게 되었습니다.

그러면 하나씩  하나씩 살펴보도록 하겠습니다.

HTML5 로고

1. 웹(web)의 역사

먼저 웹(web)이라는 녀석이 어떻게 세상에 등장하게 되었는지 살펴보도록 하겠습니다.
웹은 월드 와이드 웹(World Wide Web)을 줄여서 부르는 말인데요. 인터넷에 연결된 컴퓨터들을 통해서 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다. 웹이라는 단어는 생소하기도 한데요. 우리는 흔히 이 웹을 보고 인터넷이라고 말하기도 합니다. 하지만 웹은 인터넷 밑에 있는 하나의 서비스라고 보면 될 것 같습니다.

웹은 1989년 3월 유럽 입자 물리 연구소(CERN)의 소프트웨어 공학자인 팀 버너스 리의 제안으로 시작되어 연구, 개발 되었습니다. 원래는 세계의 여러 대학과 연구기관에서 일하는 물리학자들의 신속한 정보교환과 공동연구를 위해 고안되었다고 합니다.

웹은 1989년에 제안되어 1991년에 배포되었고 1993년에 공개되었습니다. 1994년 10월에는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직인 W3C(월드 와이드 웹 컨소시엄, World Wide Web Consortium)가 창설되었습니다. 

HTML은 무엇인가요?

위에서 웹은 인터넷 밑에 있는 하나의 서비스라고 말씀드렸지요? 

HTML은 인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류입니다. HTML은 HyperText Markup Language의 약자입니다. 우리가 인터넷을 할 때 많이 보는 페이지는 거의 HTML로 만들어진 것입니다.

HTML은 1991년부터 버전별로 발표가 되었는데 HTML1은 1991년, HTML2는 1995년, HTML3는 1997년, HTML4는 1997년, HTML5는 아직 진행중에 있습니다.

이 HTML로 작성된 문서를 보기 위해서 필요한 것이 바로 웹브라우저(Web browser)입니다. 컴퓨터를 이용해서 인터넷을 이용하는 분들은 99.9% 웹 브라우저를 통해 인터넷을 이용하고 있습니다. 

웹브라우저의 역사

웹 브라우저는 1993년 일리노이공과대학 연구기관 NCSA의 재학생이었던 마크 안데르센이 최초의 GUI환경의 모자익(Mosaic)을 개발해서 발표함으로 시작되었습니다. 1994년에는 넷스케이프 커뮤니케이션으로 이름을 변경하고 넷스케이프를 발표하게 됩니다. 또한 윈도우로 유명한 마이크로소프트 사는 인터넷 익스플로러(Internet Explorer)을 발표하여 상호 경쟁의 길을 걷게 됩니다.

그 이후 인터넷 익스플로러의 점유율이 넷스케이프를 따돌리게 되고 1998년에는 아메리카 온라인(AOL)사가 넷스케이프 커뮤니케이션을 인수한 이후 넷스케이프는 하락의 길을 걷게 됩니다.

그 후 웹브라우저 시장에서 최고 점유율을 유지하며 승승장구 하던 익스플로러는 엑티브엑스 플러그인(Active-X Plugin)을 이용해 화려하고 다양한 기능의 웹을 구현했습니다. 

Web의 발전

1991 HTML 발표

1994 HTML2 발표

1996 CSS1, Javascript 발표

1997 HTML4 발표

1998 CSS2

2000 XHTML1로 개발의 방향을 변경하였다

2005 AJAX

2009 HTML5 발표

2. 왜 웹표준이 필요했을까요?

가끔 인터넷을 하다보면 똑같은 사이트인데 다른 브라우저를 사용하면 다르게 보이는 이유는 표준이 없이 작성되었기 때문입니다. 그래서 브라우저의 종류마다 또는 같은 브라우저라고 하더라도 브라우저의 버전에 따라서 화면이 다르게 보이는 상황이 발생했습니다.

이러한 이유로 웹표준의 필요성이 절실히 요구되었으며, 그 와중에 HTML5가 등장하게 되었습니다.

3. HTML5의 특징

첫째, HTML5 이전버전까지는 플러그인 없이 스스로 동영상이나 음악을 재생할 수 없었기 때문에 Active-X나 Flash등을 이용해서 재생을 한 반면, HTML5는 동영상이나 음악을 스스로 재생이 가능하다는 큰 특징이 있습니다.

둘째, HTML5에서는 SVG태그를 이용한 2차원 벡터 그래픽과 자바스크립트  캔버스를 사용한 2차원 래스터 그래픽, CSS3과 자바스크립트 WebGL을 사용한 3차원 그래픽의 구현이 가능해졌습니다.

셋째, HTML5는 서버와 소켓 통신이 가능해 실시간으로 서버와 양방향 통신을 수행할 수 있습니다.

넷째, 스마트폰의 배터리 잔량을 확인이나 GPS의 확인 및 장치접근이 가능해졌습니다.

다섯째, HTML5는 오프라인 상태에서도 작업이 가능합니다.

HTML5에서 등장한 새로운 태그(tag)

기존 버전과 다르게 HTML5에서는 새로운 태그(tag)들이 등장했는데요. 새로운 태그(tag)들은 아래와 같습니다.

* HTML5에서 새롭게 등장한 태그

section

article

aside

hgroup

header

footer

nav

figure, figcaption

audio, video

embed

mark

progress

meter

time

ruby

canvas

command

details

datalist

keygen

output

* HTML5에서 중단된 태그 

basefont

big

center

font

frame, frameset, noframe

s, strike

tt

u

여기까지 HTML5와 웹브라우저에 대해서 간단하게 정리해 보았습니다. 

>> HTML5 두번째 강의로 이동하기