스타일시트

7. 스타일시트

- 지정되지 않는 기본 글자, 링크된 문서, 한번 방문한 링크 등의 색상지정

이것을 분석하면 다음과 같습니다.
스타일시트는 글자크기와 모양, 색상 등을 지정해 주고 특히 링크시의 색상변화를 다양하게 해 주는 것입니다.
처음과 시작은 <style>과 </style>이고 이 전체는 <head>와 </head>의 사이에 들어 있어야 합니다.
제일 처음의 body와 table은 table이 있을 경우에 사용하는데 body의 안에 있는 margin은 맨 위와 혹은 왼쪽, 오른쪽 등과 table과의 거리를 주는 것이고 table의 안에 있는 font의 size, family(face), color 등은 table 안에 들어가는 기본글자들을 지정하는 것입니다.

그러면 본격적으로 스타일시트 설명으로 들어가겠습니다.
A:link는 링크를 말합니다.
A:visited는 이미 열어 본 링크를 말합니다.
A:active는 클릭한 링크를 말합니다.
A:hover는 마우스가 링크 위에 있을 때를 말합니다.
그리고 이 뒤의 {}안에 있는 것은 그 색상 지정, 그리고 위에는 안나타나 있지만 글자체, 글자크기 등을 다시 일일이 지정할 수 있습니다.
또한 text-decoration:는 밑줄을 표시할 것인지를 설정하는겁니다.
밑줄을 없앨때는 none으로, 밑줄을 보이고자 할때는 underline을 적어주시면 되고 위아래 모두 줄이 나타나기를 원하면 underline overline이라고 하면 됩니다.

참고로 스타일시트를 쓰지 않고 그냥 <body> 태그를 다음과 같이 해 주어도 링크를 변화시킬 수 있습니다.
<body text="black" link="336699" alink="ff6600" vlink="a3dc57">
여기에서 text는 기본 문자색을, link는 링크색상을, alink는 현재 클릭하고 있는 링크색상을, vlink는 열어 본 링크색상을 지정해 줍니다.

★예제소스★

<html>
<head>
<title>스타일시트 예제</title>
<style>
A:link {color: a3dc57; text-decoration: none}
A:visited {color: a3dc57; text-decoration: none}
A:active {color: white; text-decoration: none}
A:hover {color: ff6600; font-family: 궁서; text-decoration: underline}
</style>
</head>
<body bgcolor="CD919E">
<center><font color="white" face="이솝체">스타일시트</font></center><p>
<hr size=2, color="336699" width=250 align=center><p>
<a href="http://my.dreamwiz.com/m9099/" target="blank">'물결이와 놀아요'로...</a><p>
<font color="336699" size="2" face="돋움"> 링크의 글자색상을 보시고 난 후 마우스를 대었을 때의 글자색상과 모양, 밑줄 등의 변화를 보세요. 그리고 클릭한 다음에 마우스를 떼고 나면 또 색상이 변화할 것입니다.</font> <p>
</body>
</html>