CSS의 역사와 표기 방법에 대해 간략하게 정리해 보자. CSS의 역사도 HTML만큼이나 지저분하다. 구조와 표현의 분리는 원칙적인 이론이어서 HTML이 등장하기 훨씬
전인 1970년대부터 문서를 만들 때 내용과 디자인을 분리하려는 시도가 있었다. HTML 초기에도 관련 논의가 있었지만 스펙이 워낙 단순했기 때문에 스타일 관련 문법을 도입하지는 않았다.
애초에는 학술 논문 정도만 교환할 목적으로 설계했으며 오늘날처럼 광범위하게 사용될 것을 미처 예측하지 못한 것이다. 그러다가 HTML이 점점 다양한 곳에 활용되기 시작함으로써 요구
사항이 증가하고 복잡해지기 시작했다. 뒤늦게 HTML 문법에 <font>, <center>, align 따위의 태그와 속성을 도입하여 표현의 문제를
해결하려 했지만 오히려 많은 부작용을 낳았다.
W3C는 디자인만을 전문으로 담당하는 CSS1을 1996년에 발표했으며
IE3에 시범적으로 적용되었다. 1998년에 CSS1을
개선한 CSS2가 발표되었으며 2001년경 IE6가 발표되면서 본격적으로 사용되기 시작했다. 사실 CSS를 개발한 동기는 순수하지 못했다. 브라우저 1차 대전이 한창인 무렵이어서 강력한 스타일 기능을 무기로 하여 경쟁 브라우저를 죽이기 위해서였다. 양쪽 진영은 경쟁적으로 스타일을 확장했지만 표준이 없어 서로 호환되지 않았다.
그 당시에는 <style> 태그를 다음과 같이 작성했는데 현재의 style 태그와는 두 가지 차이점이 있다.
<style type="text/css">
<!--
p { font-size:12pt;color:blue;font-weight:bold; }
-->
</style>
① type 속성으로 어떤 종류의 스타일시트인지 지정한다. 타입이 있다는 것은 스타일시트가 여러 종류라는 얘기인데 당시에는 넷스케이프가 지원하는 "text/javascript"방식의 스타일시트도 있었다. 당연히
두 방식은 서로 호환되지 않았다.
② 스타일 지정문이 HTML 주석으로 둘러 싸여 있다. 브라우저끼리 상대편의 스타일을 인식하지 못하므로 주석으로 처리하지 않으면 스타일 지정문이 그대로 웹 페이지에
출력되는 볼썽 사나운 현상이 발생했기 때문이다.
다행히 지금은 CSS로 스타일시트가 통일되었고 스타일을 인식하지 못하는
브라우저가 없으므로 더 이상 type을 밝히거나 스타일 지정문을 주석으로 감싸지 않아도 된다. HTML5에서는 간편하게 style 태그 안에 스타일 지정문만 나열하면
된다. 이것이 표준의 역할이며 힘이다.
<style>
p { font-size:12pt;color:blue;font-weight:bold; }
</style>
현존하는 HTML 문서를 보면 가끔 구형 <style> 태그를 사용하는 경우가 있는데 과거의 잔재일 뿐이며 지금은 그렇게 작성할 필요가 전혀
없다. 과거에 작성된 스타일 문서에 type 지정문이나 주석문을
보면 옛날에는 그랬나 보다 생각하면 그만이다. 앞으로는 무조건
HTML5 표준대로 간편하게 작성하도록 하자.
HTML 4.01이 그랬듯이
CSS2도 상당히 오랜 기간 장수했다. HTML5의 등장과 함께 CSS3가 새로 등장했으며 CSS3는 아직도 만들어지고 있는 중이다. 그러나 대부분의 브라우저가 초안을 충실히 구현하고 있으므로 현재의 기술이라고 봐도 무방하다. CSS3에서 추가된 주요 기능은 다음과 같다.
■ 구조 선택자 지원
■ 가상 선택자 지원
■ 둥근 모서리의 경계선 지원
■ 그라데이션 배경 지원
■ 변환, 전환, 애니메이션 지원
■ 글자와 박스 뒤에 그림자
효과 지원
현재 모든 브라우저가 CSS3를 완벽하게 지원하는 것은 아니다. 일부 기능은 브라우저에 따라 지원 방식이 달라 별도의 접두어를 붙여야만 사용할 수 있다. 당분간은 혼란기를 거칠 수밖에 없으며 HTML5 표준이 확립되면
정리될 것이다.