기초부터 배우는 HTML5 1강

기초부터 배우는 HTML5 (Basic of HTML5)

인터넷이라고 하면 웹이 바로 생각이 나고, 웹과 함께 HTML이나 CSS, Javascript 같은 용어들이 같이 떠오를 겁니다. 웹에 사용되는 이 용어들이 무엇이고, 어떻게 시작이 되었는지 먼저 가볍게 살펴보면서 진행하도록 하겠습니다.

HTML이란?

HTML은 Hyper Text Markup Language라는 의미를 담고 있는 하나의 언어입니다. 한마디로 hyper text가 담긴 문서를 제작하는 언어라는 의미죠.

그렇다면 하이퍼텍스트가 뭔지 궁금해 하셔야겠죠?

Hyper Text(하이퍼 텍스트)란 하나의 Text(문서)로 두는 것이 아니라 문서와 문서를 서로 연결시켜, 도시의 복잡한 도로처럼 상호 연결하여 접근 방식을 다양화시킨 문서를 가리킵니다.

이렇게 HTML로 작성된 문서를 사용자에게 보여주는 프로그램이 "웹 브라우저"입니다. 크롬, IE, 오페라, 파이어폭스 등을 떠올리면 됩니다.

(인터넷 익스플로러가 얼마나 쓰레기인지를 보여주는 사진입니다)

HTML5까지 변화하는 동안 무슨 일이 있었을까요?

HTML4에서 HTML5가 등장하기 까지 10년 이상의 시간이 걸렸다고 합니다. 

사람들이 '웹'이라는 인터넷 서비스에 열광하기 시작한 것은 웹 브라우저 프로그램이 등장하면서부터 였는데요. 복잡한 명령을 입력하지 않아도 몇 개의 버튼만 누르면 필요한 정보를 찾아 화면에 보여줄 수 있었기 때문입니다.

인터넷 서비스가 웹 중심이 되면서 등장한 업체들이 바로 모자이크, 넷스케이프 그리고 마이크로소프트입니다. 이들은 자신만의 브라우저를 가지고 있었고, 서로 경쟁적으로 브라우저 사용자들을 늘리기 위해 노력했습니다. 그리고 웹에서 경쟁력을 얻기 위해 서로 여러 가지 웹 확장 기술들을 내놓게 됩니다. 각 업체마다 글꼴이나 색상, 프레임같은 HTML 기술들을 자신들의 브라우저에 맞춰서 내놓았고, 웹 개발자들은 소위 멘붕터질 수 밖에 없었습니다.

가장 큰 문제점은 바로 "크로스 브라우징 이슈"를 해결하는 것이었습니다. 인터넷 익스플로러와 넷스케이프 내비게이터가 웹 문서의 해석 방식에 있어서 차이가 있었기 때문에 양쪽 브라우저에서 같은 사이트를 볼 수 있게 하려는 것이었죠. 그래서 같은 사이트를 넷스케이프용과 인터넷 익스플로러용 두 가지로 만들기도 하고, 자바스크립트를 사용해서 사용자 브라우저에 따라 다른 방법으로 문서를 해석하게 하는 등 여러 방법을 강구해야 했습니다.

HTML5 등장

당시 인터넷 익스플로러의 제작사인 마이크로소프트 사를 제외하고 애플과 모질라, 오페라, 구글 등 주요 브라우저 업체들은 실질적인 웹 표준 제정에 한 목소리를 냈는데요. XHTML이라는 새로운 표준을 만들기보다 페이지의 기본 기능인 HTML을 확장하여 동적인 웹 서비스를 구현하자는 데 의견을 같이하고 WHATWG(Web Hypertext Application Technologies Working Group)를 구성합니다. 이곳에서 'HTML4를 발전시킨 마크업'과 '웹 애플리케이션 1.0', '웹폼 2.0'을 연구하게 된거죠.

그 후 '웹 애플리케이션 1.0'을 'HTML5'로 부르게 됩니다.

현재 HTML5에 대한 최종 검토안이 W3C에 상정되어 있고, 대부분 HTML 규약이 완성 단계에 있습니다. 최신 브라우저들은 HTML5에서 제안하고 있는 기능들을 대부분 지원하기 때문에 충분히 사용이 가능합니다. 

HTML5의 정의는 단순 웹문서(Text)를 표현하는 HTML(Hyper Text Markup Language)의 기본 기능을 넘어서 다양한 멀티미디어 콘텐츠와 어플리케이션을 Browser에 표현하고 실행하기 위해 ‘현재 만들어지고 있는 언어’입니다. 

ActiveX, Flash 등의 별도의 플러그인이 필요 없고, 스마트폰 및 태블릿 PC에 친화적인 기능들로 구성되어 단말기, OS, 브라우저의 종류에 구애 받지 않는 범용 표준 개발 언어라고 정의할 수 있습니다. 다시 말해, 기술적인 제약이 많았던 HTML4.01과 비교하면 HTML5는 단순한 버전 업그레이드의 차원을 넘어서는 그야말로 혁명적 변화라 할 수 있지요.

HTML을 배우기 위한 기본적인 지식을 습득했다고 생각하시고, 다음 강의부터는 이제 본격적으로 코드를 작성하면서 설명하도록 하겠습니다.