진보호스팅 블로그

1.1. CSS - Cascading Style Sheet
HTML은 운영체제나 사용하는 프로그램에 관계없이 누구나 같은 내용의 문서를 볼 수 있도록 하겠다는 취지에서 만들어졌다. 그러나, 웹문서가 인쇄 매체처럼 다양하고 화려해짐에 따라, 점차 전자출판의 성격을 띄게 되었고, HTML은 그 한계를 드러내고 있다. 여기서 한계라고 짚어볼 수 있는 부분들은 무엇보다도 레이아웃의 세밀한 제어, 그리고 배경과 문자열과의 배치 등을 꼽을 수 있다. 스타일시트를 사용하면 기존의 TABLE이나 FRAME에 의존하던 문서의 레이아웃을 보다 효과적으로 할 수 있고, 글자 크기나 글자체, 줄 간격, 배경 색상 등도 자유롭게 선택할 수 있다. 또한, 스타일을 정의해 놓고 여러 개의 문서에서 불러 쓸 수 있어, 일관된 외양을 요구하는 여러 개의 문서를 만들 때 매우 편리하다. 그러나 CSS의 단점도 상당부분 존재한다. 무엇보다도 대중적으로 널리 사용되고 있는 넷스케이프와 익스플로러에서 각기 다른 표준안을 채택하고 있다는 점이 가장 문제가 되는 점이다. 이점은 두 브라우저에서 달리 사용되는 부분에 대한 중복적인 코딩을 해야한다는 의미가 되며 웹디자이너들을 혼란에 빠뜨리는 이유가 된다. 또한 표준 권고안으로 제시된 부분에 대해서도 아직까지 지원이 안되는 기능들이 상당히 많은 문제점도 가지고 있다. CSS는 현재 Level 2 버전이 나와있으며, 넷스케이프와 익스플로러 4.0 이상이 지원한다. HTML 4.0과 CSS, JavaScript 등을 함께 일컬어 Dynamic HTML이라고 부르기도 한다.

1.2. 간단한 예
앞에서 배운 HTML의 H3 요소에 이탤릭 효과와 글씨 색으로 녹색을 지정하기 위해서 HTML에서는 H3 요소에 일일이 다음과 같이 해 주어야 한다.

1.3. 스타일시트의 구성 요소
HTML이 태그들의 모음이라면, 스타일시트는 프로퍼티(property)들의 모음이다. 위의 예에서 font-style이나 color가 속성(attribute)이 되고, italic과 green은 해 당 속성에 대한 값(value)이다. HTML의 속성은 정해진 요소에만 붙을 수 있지만, 스타일시트의 속성은 거의 모든 요소에 다 붙을 수 있다는 점이 다르다. 속성이 붙는 H3과 같은 요소를 스타일시트에서는 선택자(selector)라고 부른다.
다음과 같은 형식을 기억하면 된다.

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

1.4. 스타일시트 삽입하기
HTML문서에서 스타일시트를 사용하는 방법은 다음의 세가지가 주로 사용된다.


1.4.1. 문서의 HEAD에 정의하기

	이 문장은 원래의 H3 특성과 함께 녹색, 이탤릭체로 나타난다. 이 부분도 마찬가지이다.

HEAD에 정의할 때는 STYLE 태그를 사용한다. type 속성은 반드시 함께 써 주어야 한다. 주석 표시는 스타일시트를 지원하지 않는 브라우저가 스타일을 무시하도록 하기 위한 것이다 (앞에서 자바스크립트의 경우와 연관지어 보자). 다시 한번 언급하지만 스타일을 정의하는 부분은 { } 안에 넣는다. 속성과 값은 콜론(:)으로 구분하고, 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분한다. HTML에서와 마찬가지로 대소문자나 빈칸은 구분하지 않는다.

1.4.2. style 속성 이용하기

	여기는 H3이면서 녹색이고 이탤릭체이다. 여기는 스타일 적용이 되지 않는다.

특정한 요소에 한 번만 스타일을 적용할 때는 style 속성을 사용할 수 있다. 이 때는 HTML의 문법을 따르므로, style 뒤에 " " 표시를 하고 속성과 값을 써 준다. 속성과 값 사이에 콜론, 속성과 속성 사이에 세미콜론을 쓰는 것은 첫 번째와 같다.

1.4.3. 외부 스타일시트 연결하기
먼저 다음과 같은 내용의 파일을 만들고 style.css로 저장한다.

HEAD 부분에 LINK 요소를 사용해 style.css 파일을 연결한다.

	여기는 녹색이고 이탤릭체인 H3이다. 여기도 그렇다.

rel은 연결하는 문서가 스타일시트 문서임을 말해준다. type은 스타일시트의 형식을 나타내고, href는 스타일시트 파일의 경로를 써 준다. 아무리 많은 문서를 만들어도 스타일은 style.css 파일에서 모두 정의해 주고, 문서들에는 LINK 요소만 넣어주면 된다. 수정을 할 때는 style.css 파일만을 고치면 된다. 앞으론 주로 이러한 방법을 자주 사용하기를 권한다.

1.5. 기호 설명
앞으로의 설명을 위해 반드시 알아두어야 할 기호들이다. 이러한 기호들은 이 글외에도 대부분의 컴퓨터 관련 서적에서 사용하고 있는 기호이므로 꼭 알아두도록 하자.

A | B : A 또는 B 중의 하나이다.
[ ] : 일반적인 의미의 괄호이다.
A {1,n} : A가 최소한 1번에서 최대한 n번 들어간다.
: A 속성의 값이 들어간다.
A || B : A 또는 B 중의 하나, 또는 두 개가 다 들어갈 수 있다.
A* : A가 0번 이상 여러 번 나올 수 있다.
A? : A가 들어갈 수도 있고, 안 들어갈 수도 있다.