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로 시작되는 줄만 아래처럼 취향에 맞게 바꿔 사용하시면 독특한 효과를 표현할 수 있겠죠.
dotline.gif 는 점선밑줄로 사용할 그림의 경로 및 이름.
이 경우는 점선으로 사용할 그림이 하나 있어야 합니다. 가로3픽셀, 세로1픽셀짜리로 준비하시면 되구요. 투명한 바탕의 가운데 점 하나만 찍어주면 됩니다. ← 확대해보면 이런 모양이 되겠죠. 파란사각형의 양쪽은 투명배경 (배경색이 있는 문서에서 자연스러운 점선을 표현하기 위함)입니다. 물론, 다른모양 다른크기로 만들어도 상관은 없습니다:) 저 그림을 다운 받아서 파란색만 다른 색으로 바꿔 사용하셔도 됩니다^^
추천 : 