지난 시간에 스타일시트에 대한 간략한 소개를 보았을 것이다.
하지만 스타일시트는 기존의 태그들과는 사용법이 조금 상이하니 꾸준히 사용해서 익숙해지도록 하자.
 
 
링크의 기본은 파란색에 밑줄이 달린 것이다. 방문한 링크는 아래와 같이 혐오스러운 색이 된다.
 
링크 인 척 하는 가짜 링크 방문 전
링크 인 척 하는 가짜 링크 방문 후
(가짜 링크니까 클릭하지 말자.. 클릭되지 않는다..)
 
 
 
이번시간에는 홈페이지내에 있는 모든 링크의 색상을 조절해볼뿐만 아니라, 마우스를 갖다대면 색상이 변하게 하고 밑줄도 없에 볼 것이다.(와우!)
 
모든 링크의 색상을 다 바꿀 거니까 스타일시트를 이용하는 것이라는 것은 지난시간의 스타일시트 소개를 보고 알았을 것이다. 개별적으로 바꾸고 싶은 것은 따로 <font color>를 지정해주면 된다.
 
 
링크의 색상을 변환시키는 예)
<style>
    a:link { color:black; text-decoration:none; }
    a:visited { color:black; text-decoration:none; }
    a:hoverd { color:gray; text-decoration:none; }
    a:active { color:black; text-decoration:underline; }
</style>
 
link - 기본적인 링크
visited - 방문했던 링크
hover - 마우스 오버된 링크(마우스가 위에 얹어진 경우)
active - 활성화된 링크(클릭된 경우)
 
color - 글자 색깔
text-decoration - 텍스트의 꾸밈(밑줄과 없음으로 나뉨)
 
 
이렇게 스타일시트를 이용해서 링크크의 색상들을 일괄적으로 바꿀수도 있으며, 마우스 오버시 색깔이 변하게 할 수도 있다. 단 링크는 부분적으로 스타일을 지정하는게 불가능하다(개별적으로는 가능하지만 table에만 적용한다던지는 불가능)
 
 
이번시간에는 링크의 색상조절을 알아보았다. 그럼 다음시간에 뵙겠다.
 

이 게시물을..