세간의 이목이 HTML5에 집중되고 있는 것 같습니다.
아름다운 단어들이 많이 회자되고 있습니다만,
기술 관점에서 HTML5의 주요 개념을 써보려고 합니다.
*** 기술 관점에서 HTML5를 나타내는 주요 개념 키워드는 구조와 구성이라고 할 수 있습니다.
구조는 좌우상하의 얼개 형태에 중점을 두며 구성은 요소를 모아 전체를 형성하는 것에 중점을 둡니다.
예를 들어 건물 구조라고 하고 책의 구성이라고 합니다.
건물 구조는 좌우상하 얼개가 면밀하게 연결되어 있는 반면,
책의 구성은 각 장이 연결되지 않고 독립적인 내용을 갖더라도 책 전체가 나타내려는 의도에 맞으면 됩니다.
바로 이 개념이 HTML과 HTML5의 차이입니다.
HTML을 대표하는 DOM은 다큐먼트를 구조 중심으로 접근합니다.
DOM 트리(tree)는 좌우상하 구조에서 엘리먼트를 추출하고 설정하며
구조가 끊어지거나 중복되면 트리 구조가 깨지므로 항상 얼개 형태를 유지해야 합니다.
즉 선조와 자손, 패어런트와 차일드, 형제 엘리먼트가 구조적으로 연계되어야 합니다.
한편 HTML5는 구조가 아닌 구성에 중심을 둡니다.
좌우상하 얼개에 중심을 둔 것이 아니라 각 요소가 독립된 형태를 유지하면서
아울러 이 요소를 모아 완성된 형태가 되는 구성에 중심을 둡니다.
물론 다큐먼트에 표현해야 하므로 엘리먼트가 구성 요소가 되지만
DOM 트리와 같이 좌우상하 구조가 얽매어 있는 형태가 아닌
여기저기 흩어져 있어도 전체가 맞도록 하는 구성에 중심을 둡니다.
HTML5는 이를 위해 새로 엘리먼트를 추가했으며 부분적으로 기존 엘리먼트의 기능과 목적을 변경했습니다.
사실 HTML5로 다큐먼트를 구현하는 것이 만만치 않습니다.
콘텐츠 모델을 통해 차일드 엘리먼트로 작성할 수 있는 카테고리에 제한을 두었으며
또한 역으로 차일드 엘리먼트가 작성될 수 있는 카테고리에 제한을 두었습니다.
이는 구조가 아닌 구성에 중점을 두기 때문입니다.
<section> 엘리먼트는 콘텐츠를 그룹화하며
자바스크립트로 접근하거나 CSS 스타일을 적용하지 않도록 하고 있습니다.
이를 위한다면 <div> 엘리먼트를 사용할 것을 권하고 있습니다.
엘리먼트를 단지 그룹화하는데 사용한다는 개념은 HTML4에 없던 개념입니다.
<article> 엘리먼트는 블로그 글과 같은 아티클을 작성할 때 사용하도록 하고 있습니다.
<h1>~<h6> 엘리먼트는 섹션의 제목을 표현하도록 기능이 변경되었습니다.
그냥 제목이 아니라 섹션의 제목입니다.
여기서 섹션은 구조가 아니라 구성입니다.
예를 들어 다수의 섹션이 있다고 할 때 모든 섹션에 <h1> 엘리먼트를 작성할 수 있습니다.
괴팍하다고 느낄 수 있지만 구성에 중점을 두었기 때문입니다.
제목, 부제목이 아니라 세션에서 구성 역할을 합니다.
어떻게 보면 뜬 구름 잡는 개념이 될 수도 있습니다.
하지만 분명한 것은 HTML에서 HTML5로 표기가 변경된 것이지
새로운 각도에서 다시 생각해야 한다는 것입니다.
표기를 액면 그대로 받아 들여서는 곤란합니다.
2D 그래픽을 표현할 수 있어 HTML5가 대단하다고 하는 것은 처음 접할 때입니다.
실제로 현장에서 구현해야 하는 개발자 입장에서 보면 사상과 개념을 명확하게 이해하고 정립해야 합니다.
HTML에 대한 지식을 모두 지워버리고 새로운 생각으로 접근하는 것이 고정관념에서 벗어나 쉽게 받아들일 수도 있습니다.
그렇다고 HTML5에서 DOM 트리 구조를 버린 것은 아닙니다.
HTML5가 HTML, XHTML, DOM을 아우른 것이므로 기반은 DOM 트리 구조입니다.
HTML5는 여기에 구성 개념을 추가하여 이를 중심으로 사상을 재정의한 것입니다.
구성 개념으로 접근하더라도 다큐먼트 반영의 기본은 DOM 트리입니다.
그렇다고 HTML5를 DOM 트리 개념으로 접근해서는 곤란합니다.
구성 관점에서 정의한 것을 DOM 트리 구조로 변환하는 것은 브라우저의 몫이며
이를 아웃라인 알고리즘이라고 합니다.