스타일 시트(CSS)는 기존의 HTML에서 있었던 중복된 태그의 반복 이라는 불편함을 제거해주며 다양한 환경에서도 일관성 있게 내용을 보여주기 위해 만들어졌다. 뿐만 아니라 보다 강력한 기능들이 홈페이지를 더욱 빛나게 바꿔줄 것이다.
 
 
무슨 소린지 잘 이해가 안되니 찬찬히 살펴보겠다.
 
 
우선 스타일 시트는 어떻게 생겨먹었는가..
 
스타일시트는 무슨 다른 언어이거나 한 것이 아니라 HTML문서내에서
<style></style>로 묶이거나, <font style=""> 처럼 태그 내부에서 사용된다.
  
이런 스타일 태그는 ①HTML 상에서 일관성 있게 보여주며 ②뛰어난 디자인을 제공하고 ③편하게 디자인 할 수 있도록 도와준다.
 
 
 
우선 스타일시트의 일관성이라는 측면을 알아보도록 하겠다.
 
 
  HTML을 배웠다면 <font>라는 태그를 알 것이다. 폰트태그는 글자의 색깔, 크기, 글꼴등을 제어할 수 있다. 여기서 글자의 크기를 보자. 글자의 크기는 size라는 속성을 조절한다. 그런데 이 사이즈의 단위는 무언가 명확한 기준이 있는 것이 아니다. 그래서 보여지는 환경(서로 다른 컴퓨터)에 따라 글씨크기가 다르게 보일 수 있다.(헉?!) 
 
 

[글씨크기가 바뀌는 글씨]
   
 

   어떻게 그럴 수 있냐고? 해상도의 차이? 그런게 아니다. 익스플로러의 [도구] - 텍스트 크기 로 가 보면 글씨크기를 조절할 수 있다. 그것을 바꿔보면 size로 지정한 위의 폰트는 글씨크기가 바뀌는 게 볼 수 있다. 이렇게 글씨 크기가 멋대로 바뀌게 되면 테이블이 늘어나거나 줄어들 수 있고 내 컴퓨터에서는 분명 딱 맞는 사이즈 였지만 다른 컴퓨터에서는 이상하게 보일 수 있는 것 이다.

이 때 사용되는 것이 스타일시트다. <font size="3"> 대신 <font style="font-size:12px">를 통해 글씨크기를 주면 글씨의 크기는 환경에 따라 바뀌지 않는다. 왜냐? 픽셀 값으로 글씨크기를 주기때문이다. 사이즈라는 애매모호한 단위가 아니니까! 그래서 아래의 글씨는, 그리고 여기에 쓰인 글들은 크기가 변하지 않는다!

 
 



[글씨크기가 바뀌지 않는 글씨]
 
 

 
다음은 태그의 반복제거 라는 측면을 보도록 하자

  테이블이 있다. 이 테이블의 칸들은 각각 <td></td>로 이루어진다. 그런데 문제는 각각의 칸들은 독립적이기 때문에 모든 칸들에 대해 폰트의 색상을 빨강으로 바꾸려면 아래와 같이 해야했다.
 
<TD><font color='red'>내용 1</font></TD><TD><font color='red'>내용 2</font></TD>..
 
  이 얼마나 불편한 일인가? 모두 다른 색깔로 하려 했다면 그렇다 쳐도 나는 모두 같은 색깔로 하고싶었을 뿐이다!
 
 
이럴 때 사용하는 게 바로 스타일 시트다.
  첫번째로 <style></style>을 이용해보자. 이 태그는 body가 오기전에 사용해야 한다. head에 넣거나, 최소한 head와 body의 사이에 넣어야 한다.
 
<style>
    td { color:red; }
</style>
 
이 의미는 해당 문서의 모든 TD에 사용되는 폰트의 색깔을 red로 지정하는 것이다.
따라서 그냥 TD를 이용하면 저절로 색상은 빨강이 되는 것이다.
 
 
하지만 나는 하나의 표에만 모든 칸에 대해 색깔을 빨강으로 지정하고 싶었을 뿐이라면 아래 처럼 Table에 추가 하면 된다.
 
<TABLE style='color:red;'>
 
테이블 내의 모든 칸에 하고 싶었던 것도 아니고 하나의 행에만 하고 싶었다면 아래와 같이 하면 되겠지?
 
<TR style='color:red;'>
 
 
이 외에도 필터를 통해 글자를 뒤집는 다던지 이미지를 변환시킨다던지 하는 디자인의 강력함이 있다. 그런걸 여기서 모두 소개해 버리면 다음 강좌는 없어지니까 그러한 기교들을 이제 다음 강좌들을 통해 배워보도록 하자 -_-)
 
그럼 다음 강좌에서 뵙겟다
이 게시물을..