CSS Level 2 개요

CSS란 Cascading Stylesheet를 말한다.

HTML은 운영체제나 사용하는 프로그램에 관계없이 누구나 같은 내용의 문서를 볼 수 있도록 하겠다는 취지에서 만들어졌다. 그러나, 웹 문서가 인쇄 매체처럼 다양하고 화려해짐에 따라, 점차 전자출판의 성격을 띄게 되었고, HTML은 그 한계를 드러내고 있다.

스타일시트를 사용하면 TABLE이나 FRAME에 의존하던 문서의 레이아웃을 효과적으로 할 수 있고, 글자 크기나 글자체, 줄간격, 배경 색상 등도 자유롭게 선택할 수 있다. 또한, 스타일을 정의해 놓고 여러 개의 문서에서 불러쓸 수 있어, 일관된 외양을 요구하는 여러 개의 문서를 만들 때 매우 편리하다. 이 문서는 스타일시트를 이용해 기본 글자 크기를 10포인트로 주고, 링크되는 곳의 밑줄을 없앴다. 또한 매 단락의 첫 줄에 한 글자만큼 들여쓰기를 해 주고, 예문에는 BLOCKQUOTE의 배경을 흰 색으로 주었다.

CSS는 현재 Level 2 버젼이 나와 있으며(완성 단계는 아님), 넷스케이프와 익스플로러 4.0 버젼에서 지원한다.

HTML 4.0과 CSS, Javascript 등을 함께 일컬어 Dynamic HTML이라고 부르기도 한다.

간단한 예

H3 element에 이탤릭 효과와 글씨 색으로 녹색을 지정하기 위해서 HTML에서는 H3 element에 일일이 다음과 같이 해 주어야 한다.

<H3><I><FONT color=green>녹색 이탤릭</FONT></I></H3>

스타일시트를 사용하면 아래와 같다.

H3 {font-style: italic ; color: green}

위와 같이 한 번만 정의해 주면 H3 element에는 모두 같은 속성을 적용시킬 수 있다.

HTML이 태그들의 모음이라면, 스타일시트는 속성(property)들의 모음이다. 위의 예에서 font-style이나 color가 속성이 되고, italic과 green은 해당 속성에 대한 값이다. HTML의 속성(attribute)은 정해진 element에만 붙을 수 있지만, 스타일시트의 속성은 거의 모든 element에 다 붙을 수 있다는 점이 다르다.속성이 붙는 H3과 같은 element를 스타일시트에서는 selector(선택자?)라고 부른다.

스타일시트에서의 주석은 /*와 */ 사이에 써 준다.