요약: 1990년 초반 월드 와이드 웹이 출현한 이래로 HTML은 비교적 강력한 마크업 언어로 진화해 왔으며 기술적으로 밀접한 관련이 있는 Javascript와 CSS를 HTML과 같이 사용하면 멋진 형태의 대화식 웹 사이트와 애플리케이션을 작성할 수 있습니다. 본 튜토리얼에서는 직접 사용해 볼 수 있는 예제를 이용하여 HTML5와 CSS3를 소개합니다. 또한, HTML5에서 제공하는 다양한 API와 새로운 요소를 위한 구문과 기능은 물론이고 HTML 테이블과 관련된 CSS3의 기능과 효과 및 새 선택기에 관한 정보를 살펴봅니다. 마지막으로 새롭게 개발된 다양한 기능을 활용하여 샘플 웹 페이지를 개발하는 방법을 살펴봅니다. 본 튜토리얼을 완료하게 되면 HTML5와 CSS3를 기반으로 하는 자체 웹 사이트나 애플리케이션을 작성할 수 있게 됩니다.
시작하기 전에
본 튜토리얼에서는 독자가 HTML과 CSS, Javascript에 대한 기본 지식이 있다고 가정한다. 또한, HTML 요소나 태그에 대한 개념, 속성의 의미, HTML 마크업의 기본 구문 및 웹 페이지의 일반적인 구조 등을 알고 있다고 가정한다. CSS와 관련해서는 요소, 클래스 및 ID 기반 선택기, CSS 특성의 구문, 인라인이나 외부 스타일시트를 사용하여 웹 페이지에 CSS를 삽입하는 방법에 익숙하다고 가정한다. 마지막으로 독자가 변수, Javascript, if문 및 for 루프에 대한 개념은 물론이고 웹 페이지에 Javascript 코드를 삽입하는 방법과 같은 Javascript 관련 지식을 다뤄본 경험이 있다고 가정한다. 시작하기 전에 이러한 기술을 다시 익혀야 한다고 생각한다면 참고자료 섹션에 있는 유용한 튜토리얼과 기사를 참고하여 HTML, CSS, Javascript 개발과 관련된 기본 지식을 얻도록 한다.
과거 10년 동안 Web 2.0과 RIA(Rich Internet Application), 시맨틱 웹과 같은 개념으로 인해 HTML과 CSS, Javascript의 기능은 한계에 이르렀으며 비디오, 오디오는 물론이고 그래픽이 풍부한 대화식 애플리케이션과 같은 컴포넌트를 강화하기 위해 Adobe® Flash와 같은 플러그인을 사용하게 되었다. Adobe Flex 개발 프레임워크, Microsoft® Silverlight 플랫폼 및 JavaFX의 목표는 개발을 어렵게 하는 HTML의 취약한 기능을 지원하는 데 있었다. 그러나 마크업 언어인 HTML5는 완전한 멀티미디어 지원, 로컬 스토리지 및 오프라인 애플리케이션 지원, 원시 2D 드로잉 API 및 새로운 애플리케이션 개발 API를 지원하면서 다시 등장했으며 이러한 모든 기능은 HTML, CSS 및 Javascript가 웹 사이트와 애플리케이션에 기능이 다양한 프론트엔드를 제공할 수 있다는 사실을 보여준다.
HTML5는 2010년에 새롭게 부각될 것으로 예상되는 매우 중요한 신기술 중 하나로 널리 여겨지며 이미 HTML5를 주제로 여러 가지 책이 집필되고 있다. 수년 동안 웹은 외부 플러그인에 의존하여 웹 브라우저에서 본래 지원할 수 없는 기능, 특히 2D 드로잉과 애니메이션, 멀티미디어를 제공했다. HTML과 CSS 스펙의 최신 버전은 브라우저 컴포넌트를 추가하지 않아도 이러한 기능을 사용할 수 있게 하고, 행 끌어서 놓기 및 행 스트라이핑 등과 같은 간단한 기능을 구현하는 데 필요한 Javascript 코드의 양을 줄이고 어떤 경우에는 Javascript를 전혀 사용하지 않아도 되게 하는 데 그 목적이 있다. 본 튜토리얼에 있는 내용을 따라 HTML5를 활용하는 방법을 학습해 보도록 하자.
HTML5는 비교적 최신에 발표된 스펙이며 따라서 이 글을 쓰는 현 시점에서는 브라우저 지원이 매우 제한적이다. 본 튜토리얼에 있는 코드는 가능한 브라우저 간에 호환되도록 빌드되었지만 일부 기능은 모든 브라우저에서 작동하지 않는다. 현재의 브라우저별 기능은 본 튜토리얼에서 명확하게 확인할 수 있다. 이러한 새 기능을 모두 사용하려면 다음 웹 브라우저 최신 버전을 설치한 다음 HTML5와 CSS3 애플리케이션을 개발해야 한다.
HTML과 CSS 코드를 작성하는 데 필요한 특정 소프트웨어는 없으며 메모장, vi, emacs 등과 같은 기본적인 텍스트 편집기를 사용하면 된다. 본 튜토리얼에서는 소스 코드가 로컬 컴퓨터의 디렉토리에 저장되어 있다고 가정한다. 다시 말해서 웹 서버를 사용하거나 웹 호스팅 서비스에 해당 파일을 업로드할 필요가 없다.
