8-2-2.스타일시트

스타일시트는 스타일을 정의하는 위치에 따라 여러 가지 방법으로 작성할 수 있다. 가장 쉬운 방법은 HTML 문서 안에 스타일시트를 내장하는 것이다. <head> 태그 안에 <style> 태그를 넣고 <style> 태그 안에 스타일의 목록을 작성한다. 스타일이란 특정 대상을 어떻게 꾸밀 것인가를 지정하는 명령이며 자연어로 바꾸면 다음과 같이 표현할 수 있다.

 

■ 스타일의 개념 : S의 P속성을 V로 지정한다.

■ 스타일의 예 : 문단의 배경색을 노란색으로 지정한다.

 

CSS를 배운다는 것은 이 명령어의 S, P, V 세 가지 요소를 공부하는 것이다. 세 가지 요소는 다음과 같다.

 

■ 선택자(Selector) : 꾸밀 대상을 지정한다.

■ 속성(Property) : 꾸미고자 하는 속성을 지정한다.

■ 속성값(Value) : 속성에 적용할 값이다.

 

우선 선택자로 꾸미고자 하는 대상을 정확하게 골라야 한다. 그리고 대상에 적용할 수 있는 속성은 어떤 것이 있고 각 속성값의 효과는 어떤지 정확하게 이해해야 한다. 또 각 속성끼리의 연관 관계나 효과에 대해서도 많은 경험이 필요하다. 지정할 수 있는 속성이나 값이 굉장히 많기 때문에 CSS의 양이 만만치 않지만 다행히 양만 많을 뿐이지 난이도는 그리 높지 않다. 하나의 스타일을 지정하는 기본 형식은 다음과 같다.

 

선택자 { 속성1:값1; 속성2:값2; .... }

 

선택자를 제일 앞에 쓰고 { } 괄호 안에 적용할 속성의 목록을 나열한다. 하나의 선택자에 대해 여러 개의 속성을 동시에 지정할 수 있다. 속성과 값 사이는 :으로 구분한다. HTML 태그에서는 대입 기호를 사용하여 A=B로 표기하는데 비해 스타일은 콜론을 사용하여 A:B로 표기함을 유의하자.

속성 지정문은 세미콜론으로 끝나며 이어서 다른 속성 지정문이 온다. 즉, 속성 지정문끼리는 쉼표가 아닌 세미콜론으로 구분한다. 마지막 세미콜론은 생략할 수 있지만 이후 속성이 더 늘어날 때를 대비하여 일관되게 붙이는 것이 좋다. 꼭 필요한 것은 아니지만 :과 ; 앞 뒤에 적당히 공백을 넣어 띄어쓰는 것이 읽기에 편하다. 속성과 값 사이에 콜론, 속성 지정문 사이에는 세미콜론임을 유의하자.

CSS를 처음 배우는 사람은 꼭 color=red 식으로 실수를 하는 경향이 있으며 심지어 경험자도 습관적으로 똑같은 실수를 한다. 대입이 아니라 지정이므로 color:red로 써야 한다. 이렇게 강조해도 한 번씩은 다 color=red로 써 놓고 "왜 안되지?" 하게 될 것이다. 문법이 헷갈리게 되어 있으므로 초기의 시행착오는 어쩔 수 없는 것 같다.

스타일 하나를 한 줄에 쓰는 것이 무난하지만 지정할 속성이 많다면 다음과 같이 여러 줄에 나누어 작성해도 무방하다. 속성 지정문 하나를 한 줄에 쓰고 세미콜론으로 끝을 맺으며 다음 속성은 새 줄에 개행해서 쓴다. 선택자 다음에 { 괄호를 열고 속성 지정문을 나열하며 마지막에 } 괄호로 닫는다. 이렇게 보면 스타일 하나가 코드 블록처럼 보여 깔끔하고 편집하기도 쉽다.

 

선택자 {

     속성1:값1;

     속성2:값2;

     ....

}

 

스타일 여러 개가 모이면 문서 전체의 모양을 정의하는 스타일시트가 된다. 앞 항에서 작성했던 스타일시트를 대충 분석해 보자. 아직 CSS 문법을 배우지 않았지만 기본 영어 단어만 알아도 대충의 의미를 짐작할 수 있다.

 

<style>

     body { background:yellow; }

     h2 { font-size:225%; color:green; text-align:center; }

     p { text-align:justify; }

     li { font-size:80%; color:red; font-weight:bold; }

</style>

 

첫 번째 스타일은 <body> 태그에 대해 배경을 노란색으로 지정할 것을 명령한다. 브라우저는 이 명령에 따라 페이지의 배경을 노란색으로 채운다. 잠시 후 체계적으로 배우겠지만 background는 배경색이고 font-size는 글꼴의 크기이며 color는 문자열의 색상이다.

두 번째 스타일은 <h2> 태그에 대해 폰트 크기를 보통 문자보다 2.25배 더 크게 하고 색상은 초록색으로 출력하고 정렬은 중앙으로 맞출 것을 지시한다. 여러 속성에 대한 지정문은 세미콜론으로 구분하여 나열한다. 다시 한 번 강조하지만 쉼표가 아니다. <p> 태그에 대해서는 양쪽 정렬을 지정했고 <li> 태그에 대해서는 빨간색의 작고 굵은 글꼴을 적용했다. 이 스타일시트의 지시대로 그리면 세 번째 예제와 같은 웹 페이지가 출력된다.

일반적인 워드 작업에서도 스타일의 3요소인 S, P, V 요소를 모두 경험한다. 예를 들어 특정 부분의 글꼴 색상을 변경한다고 해 보자. 먼저 장식하고자 하는 부분을 마우스로 드래그하여 블록으로 표시한다. 그리고 속성 대화상자를 연 후 어떤 속성을 변경할 것인가를 선택한다. 이 경우는 글꼴 대화상자에서 글꼴 색 콤보 박스를 펼쳐야 할 것이다. 그런 후 콤보 박스에서 원하는 색상을 클릭하여 선택한다. 블록 지정된 부분의 글꼴색이 선택한 색으로 변경될 것이다.

 

문서에서 블록을 선택하는 것이 선택자(S)이고 글꼴 대화상자에서 글꼴 색 옵션이 조정할 속성(P)이며 콤보 박스에서 선택한 색이 속성값(V)이다. CSS나 워드 작업이나 똑같이 문서를 꾸미는 동작이므로 필요한 요소가 같을 수밖에 없다. 다만 워드는 마우스로 작업하는데 비해 CSS는 명령어로 기술한다는 것이 다를 뿐이다.