HTML과 CSS 우리는 연인

HTML과 CSS 우리는 연인이예요

특별한 글자 HTML

팀 버너스리 HTML이란 하이퍼텍스트 마크업 랭귀지(HyperText Markup Language)의 머리글자를 따서 만든 약자입니다.
조판(Markup) 또는 문서작성을 위한 언어(Language)는 언어인데 요것이 참 재미있는 특징이 있습니다. 우리가 흔히 인쇄된 책에서 보는 글자는 손으로 비비고 누르고 만져봐도 아무런 반응이 없습니다. 하지만 인터넷 브라우저에 나열된 글자는 마우스로 클릭하면 전혀 다른 그림과 문서들로 연결을 시켜주지요. 그래서 우리가 흔히 인쇄물(책 또는 신문 등)에서 보았던 보통의(Ordinary) 글자가 아닌 아주 활동적(Hyper)이고 특별한(Super) 글자(Text)라는 의미로 하이퍼텍스트(HyperText) 마크업 랭귀지(문서작성 언어)라고 표현하게 되었습니다.

HTML은 1989년 영국의 컴퓨터 과학자 “티머시 존 버너스리 경”(팀 버너스리)이 최초로 20개 정도의 약속된 단어로 HTML 태그(tag)라고 부르면서 일반에 공개한 것이 지금의 HTML이 되었습니다.

“하지만 그 이전에 인터넷은 군에서 먼저 만들었다고 설명했잖아요?” (※ 게시판 모듈 설치하기 참고)

예, 맞습니다. 하지만, 군 안에서 서로의 중요한 연락 및 통신을 위해 고안된 컴퓨터 프로그램은 일반사람들이 사용하기에는 너무나 어렵고 복잡(ASCⅡ)한 코드였습니다. 그리고 까만 모니터 화면에 하얀 글씨만 있던 아주 이상하고 볼품도 없었습니다. 과학자들은 고민에 빠졌습니다. “컴퓨터 A에서 작성한 문서가 B라는 컴퓨터에서도 똑같은 모양으로 나타나도록 하려면 어떻게 해야 할까? 그리고 일반 사람들도 쉽게 사용할 수 있는 방법이 없을까?”였고 그러면 우리 다같이 “쉬운 말로 약속을 하자. 줄임말을 이용해 컴퓨터 화면에서 글이 어떻게 정렬하고 크기는 어느 정도로 할 것인지, 그림의 크기는 어떻게 정할 것인지 스타일을 표현해 보자.”라고 만든 약속된 언어가 태그(Tag)이고 이것을 처음 주장한 사람은 팀 버너스리이며 지금의 HTML4.01까지 발전하게 되었답니다.

HTML과 CSS 우리는 연인이예요 (HTML 비긴즈 - 스몰빌 이야기)

스몰빌HTML(클락)이 성장한 마을은 스몰빌이라는 도심에서 멀리 떨어진 시골마을이었습니다. HTML의 숨겨진 능력은 이제까지 책이나 신문에서는 볼 수 없었던 하이퍼텍스트 기능을 소유했다는 것이지요. 순식간에 아주 먼 곳으로 빠르게 뜀박질을 할 수 있었습니다. 하지만 농부의 아들로 숨어 살아야 했으니 성격은 조금 내성적이고 외모는 수수하게 멋 부릴 줄 모르는 영락없는 시골 총각이었습니다. 때로는 태그(Tag)를 닫지 않고 쓰기도 하는 등 조금은 우유부단(優柔不斷)한 성격이기도 하구요.

반면에 렉스사의 회장 아들 XML(렉스루터)은 말쑥한 외모에(머리카락이 없는 것만 빼고) 항상 부를 상징하는 슈트를 입고 다닙니다. 성격 또한 무척 예민해서 태그(Tag)를 닫지 않고 산다는 것은 자기 스스로에게 절대 용납할 수 없는 금지된 행동이지요. XML은 항상 HTML을 따라다니며 그가 가진 숨겨진 능력을 찾아내려고 수단과 방법을 가리지 않습니다. 그가 운영하는 렉스사에는 HTML의 비밀을 밝히고자 은밀하게 숨겨진 비밀 연구소가 항상 운영됩니다. 때로는 한때나마 HTML의 시골 연인이었던 Ajax(라나)를 이용해 하이퍼텍스트의 비밀을 밝히려고 하지만 그리 쉽지만은 않았고 Ajax(라나)는 XML(루터)의 연인이 되고 맙니다. 결국 HTML의 유년시절은 Ajax와의 짝사랑으로 끝이 나고 말지요.

드디어 HTML이 고향별 크립톤 행성의 나이로 4.01세가 되자 양부모를 떠나 도시로 상경하게 됩니다. 그의 첫 직장은 하이퍼텍스트의 능력을 살려 데일리 플래닛 신문사의 기자로 취직하게 되고 이곳에서 그는 새로운 짝사랑 CSS(로이스 레인)을 만나게 됩니다. HTML은 이전과는 달리 시골틱한 모습을 전혀 찾을 수가 없습니다. 그동안 줄기차게 쫓아다니며 괴롭혔던 XML(렉스 루터)의 다부진 성격을 조금은 배웠으니까요. 험한 세상을 살아가려면 XML(렉스 루터)의 예리하면서도 속내를 드러내지 않는 자기만의 세상도 필요하다는 것을 깨닳았던 것이지요. 그의 외모도 XML처럼 깔끔하게 차려입은 정장스타일로 내가 이제는 예전의 내가 아니라는 뜻으로 검은 뿔테 안경도 쓰고 다닙니다. 이제 HTML은 XHTML(클라크 켄트)라는 좀 더 어른스러운 이름으로 새롭게 시작되는 도시생활에 훌륭히 적응해 나갑니다.

HTML에게는 이제까지 볼 수 없었던 새로운 능력이 생겼습니다. HTML은 이제 가슴에 문장 X를 그려넣고 하늘을 날아다니기 시작했으니까요. 그리고 HTML에게는 드라마나 영화에서 늘 그렇듯이 새로운 연인 CSS(로이스 레인)가 생겼습니다. 하지만 성격상 직설적인 사랑고백(표현)은 늘 하지 못하고 여전히 짝사랑만 할 뿐입니다. 멋진 도시남으로 변했다고는 하지만 CSS가 항상 옆에 있어야 하고 눈앞에 보이지 않으면 불안하기 그지없습니다. HTML과 CSS의 이야기를 마무리 지어야 하는데... HTML은 가끔 세상을 구조(?)하러 하늘로 날아 올라갑니다. jQuery가 세상을 지배하려고 호시탐탐 노리고 있고 그 세력을 점점 넓혀가고 있습니다. jQuery의 능력은 HTML과 CSS를 더욱 불안하게 만들것 같군요...^^

※ 후속작 "HTML 리턴즈"는 새롭게 거듭난 HTML5 의 최신작이 될것 같습니다.

HTML은 구조를 CSS는 표현을 담당합니다.

HTML과 CSS와의 관계를 설명 드리기 위해서 제가 조금 과장되고 억지스러운 이야기로 외화 스몰빌을 패러디 해 보았습니다. 재미있으셨나요? 이야기에서 정말 중요하게 설명하고 싶었던 부분은 단어의 쓰임은 다르지만 구조와 표현, 그리고 HTML이 왜 엉성했던 시절을 벗어버리고 XML의 문법처럼 철저히 닫힌 태그를 사용해야만 하는지, 그리고 CSS와의 관계가 얼마나 중요한 부분인지를 이해시켜 드리고자 노력하였습니다. 이야기의 마지막 부분에 등장하는 jQuery는 영웅에게는 없어서는 안될 정말 중요한 악당 역할처럼 그 실용성과 역할을 느낌으로나마 전달해 드리고자 까메오로 등장을 했지요. jQuery는 나중에 여러분들이 직접 레이아웃을 만들고 플래시라는 기법을 사용하지 않으면서도 정말 강력하고 효율성이 높은 웹문서를 만들 때 자바스크립트의 먼 친척뻘로 꼭 필요한 부가기능입니다.

XHTML은 HTML4.01 버전을 끝으로 XHTML로 새로 태어났습니다. 이름에서 알 수 있듯이 XML과 HTML의 합성어입니다. HTML이 약속된 언어(태그)만을 사용해야 하는 반면 XML은 무한한 창조력을 바탕으로 새로운 규칙들을 생산하고 반복하여 사용할 수 있도록 돕는 역할을 하게 됩니다. 반면에 XML이 정해놓은 문법과 규칙들을 철저하게 지키지 않으면 않됩니다. 이전에는 제 맘대로 열린 태그 사용이 가능했다면 이제는 항상 닫는 태그</p>를 사용해야 하고, 테이블<TABLE> 태그를 이용해 구조를 만들어 왔다면, 이제는 DIV(division)를 사용하는 것이 바람직합니다. 만약 DIV를 사용하지 않으면 CSS의 비난을 사게 될지도 모릅니다.
HTML을 굳이 XHTML이라고 부르지 않더라도 웹2.0의 시대에서는 통상적으로 XHTML+CSS2의 구조와 표현이라는 의미로 널리 사용되고 있습니다.

HTML과 CSS

HTML의 연인 CSS는 표현을 담당합니다. HTML은 그저 단순하게 DIV를 이용해 세상을 분할해 놓는다고 큰소리만 칠뿐 나머지는 모두 CSS가 담당을 합니다. 가로와 세로의 적당한 크기와 위치, 텍스트의 크기와 색, 필요하다면 여러 가지 센스 넘치는 타고난 색감으로 HTML로는 표현할 수 없는 감성적인 부분을 CSS는 세밀하고 여성스럽게 다룹니다.

그래서 필자는 HTML과 CSS와의 관계를 연인으로 표현하고 이들의 끊임없는 사랑의 대화를 앞으로 꾸준하게 들려드리고자 합니다. HTML은 수줍움이 많고 직설적으로 잘 표현하지 않습니다. HTML이 차마 CSS에게 표현하지 못하는 부분을 CSS가 어떻게 마무리 하는지 그들의 사랑이야기를 앞으로 지켜봐 주세요.