웹페이지를 구성하는 기술의 4대 요소는 아래와 같다.
(1) HTML
(2) CSS
(3) 웹프로그래밍 언어
(4) 웹서버 운용
이중에서 (1)과 (2)가 특히 중요하다. HTML은 아주 기본적인 레이아웃 지정 마크업 언어로 최소한도나마 제공되어야 하고 CSS는 HTML로 작성한 페이지에 더욱 더 상세한 조정을 할 수 있게 해주어서 필수다.
월드와이드웹(WWW)이 태동하던 무렵의 인터넷 세상은 텍스트 위주여도 만족하던 IT 기술자들의 필요만 충족되면 되던 세상이라, 기술 문서의 공유에 적합하게만 되면 되는 세상이었다. HTML의 목적도 이와 같아서 특별한 레아이웃 기능 없이도 웹페이지가 필요를 충족했다. h1 태그나 ol, li 태그 등만 있으면 페이지 제작이 어렵지 않게 완료가 되었다.
인터넷의 일반인에 대한 보급이 이루어지면서 더 큰 레이아웃의 조정이 필요하게 된다. 기술적인 내용에만 집중하던 IT 기술자 외적으로 디자이너들이 웹페이지 제작에 큰 역할을 담당하게 되면서부터 HTML과 CSS의 기술이 널리 보급된다. 그당시의 웹디자이너들은 레이아웃의 효과적인 사용을 위해 table 태그를 중첩해서 쓰는 등의 응용을 하게 되었고 웹브라우저 제작사 측에서도 이런 요구를 들어주기 시작했다. 웹표준은 발전되어 W3C에서 재정한 표준이 발달된다.
서서히 이미지의 중요성도 커지고 자바스크립트와의 연계도 되어 DHTML과 같은 표준이 주목을 받는다.
최근 10여년간은 (1)부터 (3)까지의 기술적 연계가 눈에 띠게 발전된다. 웹디자이너들은 더 이상 table 태그의 중첩을 하기보다, HTML5의 새롭게 도입된 구조적 태그들, header나 footer, section, article과 같은 태그를 쓰게 되었고 자바스크립트의 발달로 화면 갱신을 쉽게 하도록 해주는 여러 프레임워크도 도입할 수 있게 되었다.
디자인적인 관점에서 화면에 보여질 요소들의 세세한 조정이 가능하게 됨은 물론이고 HTML 코드를 줄이고 CSS를 써서 제어하는 것이 일반화되면서 HTML 파일의 크기도 줄어들게 된다.
현대적인 웹페이지 제작은 div 태그에 class나 id 속성을 주어 화면에 배치하고 디자인적 요소를 조정한다. table 태그나 font 태그는 이제 화면 배치보다 데이터의 일목요연한 배치를 목적으로 쓴다. 구조적으로 article, section, aside, footer, nav, figure등의 태그가 HTML5로부터 제공되어 그저 화면에 보여주기만 하던데 집중하던 HTML5 이전의 코드에 비해 진화된 구조적인 특징도 가진 것이 HTML5다.
최근의 경향은 HTML 태그에 직접 속성을 주는 것을 최소화하고 대신 CSS로 효과를 주는데 있다. font로 폰트를 꾸미기보다 span 태그에 class나 id 속성을 주어 CSS로 제어한다. 텍스트 강조 또한 b나 i를 쓰기보다 CSS에서 font:나 font-weight: 같은 속성을 주어 제어한다. table로 레이아웃 배치를 하기보다 CSS로 제어한다. body 태그에 들어가는 bgcolor, link, alink, vlink 등의 속성은 피한다. 그리고 br 태그를 자주쓰기보다 CSS의 여백 기능 속성을 주어 해결하는 것이 추천된다. 한마디로 HTML을 최소화하고 CSS를 더 많이 쓰는 전략이다.
HTML5와 CSS3의 소개로 인해 여러 면에서 바뀐 것이 웹페이지 제작 기법이다. 이를 잘 알아두면 웹페이지를 더욱 더 효율적인 방식으로 달성할 수 있다. 다음편에서는 구체적인 HTML 코드 작성 가이드라인과 CSS3에 집중한 해설을 해보겠다.
이 글은 인사이트 출판사에서 나온 “세상에 없던 가장 꼼꼼한 매뉴얼” (원제: CSS3 The Missing Manual) 을 참고해서 내 표현으로 정리한 글이다.