CSS기초

에 아래 소스를 넣습니다.

	<style type="text/css"> <!-- A:link {text-decoration:none; color:#000080} A:visited {text-decoration:none; color:#000080} A:active {text-decoration:none; color:#000080} A:hover {text-decoration:none; color:#529CFF} --> </style>

하이퍼링크의 속성은 아래의 네 가지로 구분됩니다. A:link 방문한 적이 없는 평범한 링크의 모양 A:visited 방문한 적이 있는 링크의 모양 A:active 활성화된 링크. 즉, 링크를 클릭했을 때의 모양 A:hover 마우스커서가 올라갔을 때 바뀌는 링크의 모양 text-decoration 은 밑줄에 관련된 부분입니다. underline는 밑줄, overline은 윗줄, none는 줄 없음. color 는 색에 관련된 부분이구요.   위의 예제대로 한다면 신의키스 방문한 적이 없는 곳(A:link) 은 밑줄 없는 #000080 색으로, 방문한 적이 있는 곳(A:visited) 은 밑줄 없는 #000080 색으로, 링크를 클릭했을 때 (A:active) 밑줄 없는 #000080 색으로, 링크 걸린 텍스트 위에 마우스커서가 올라가면 (A:hover) 밑줄 없는 #000080 색으로 표시되겠죠.   A:link, A:visited, A:active 이렇게 세 개는 고정된 링크속성이기 때문에 별다르게 수정할 필요없이, 색만 바꾸고 위처럼 사용하시면 무난합니다. 하지만 맨 아래의 A:hover {text-decoration:none; color:#529CFF} 는 마우스커서가 올라갔을 때 반응하는 동적인 속성을 가진 곳이기 때문에, 위 소스 중 A:hove로 시작되는 줄만 아래처럼 취향에 맞게 바꿔 사용하시면 독특한 효과를 표현할 수 있겠죠.

	A: hover {text-decoration:underline; color:#529CFF} 여기에 마우스커서가 올라가면 밑줄이 생깁니다

	A: hover {text-decoration:underline overline; color:#529CFF} 여기에 마우스커서가 올라가면 아래위로 두 개의 줄이 생깁니다

	A: hover {text-decoration:none; color:#000080; background:#D0E0FF; padding:2 2 0} 여기에 마우스커서가 올라가면 링크주변이 배경색으로 채워집니다 A:link, A:visited, A:active 로 시작되는 줄에도 각각 padding 2 2 0 를 추가해주시면 보기 좋습니다. 배경이나 글자가 잘리거나 움직이지 않게 하기 위해 넣은 부분입니다.

	A: hover {text-decoration:none; color:#529CFF; font-weight:bold} 여기에 마우스커서가 올라가면 굵은 글씨로 변합니다

	A: hover {text-decoration:none; color:#529CFF; font-size:11pt} 여기에 마우스커서가 올라가면 큰 글씨로 변합니다

	A: hover {text-decoration:none; color:#529CFF; background:url(dotline.gif) repeat-x bottom} 여기에 마우스커서가 올라가면 점선 이미지가 밑줄로 보여집니다 dotline.gif 는 점선밑줄로 사용할 그림의 경로 및 이름. 이 경우는 점선으로 사용할 그림이 하나 있어야 합니다. 가로3픽셀, 세로1픽셀짜리로 준비하시면 되구요. 투명한 바탕의 가운데 점 하나만 찍어주면 됩니다. ← 확대해보면 이런 모양이 되겠죠. 파란사각형의 양쪽은 투명배경 (배경색이 있는 문서에서 자연스러운 점선을 표현하기 위함)입니다. 물론, 다른모양 다른크기로 만들어도 상관은 없습니다:) 저 그림을 다운 받아서 파란색만 다른 색으로 바꿔 사용하셔도 됩니다^^

	A: hover {text-decoration:none; color:#529CFF; border-bottom:1 dotted #0000FF} 여기에 마우스커서가 올라가면 #0000FF색의 점선 밑줄이 생깁니다 이 경우, 밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.

	A: hover {text-decoration:none; color:#000080; border:1 dotted #0000FF; padding:2 3 0} 여기에 마우스커서가 올라가면 링크주변에 #0000FF색 점선박스가 생깁니다 A:link, A:visited, A:active 로 시작되는 줄에는 각각 padding 2 3 0 을 추가해주시면 보기 좋습니다. 글자가 움직이지 않게 넣어준 여백입니다. 점선박스로 사용할 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.

	A: hover {text-decoration:none; color:#529CFF; border-bottom:3 solid #0000FF} 여기에 마우스커서가 올라가면 두께 3, #0000FF색의 굵은 밑줄이 생깁니다 밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.