CSS-링크

이 장에서는 CSS를 사용하여 하이퍼 링크의 다양한 속성을 설정하는 방법을 설명합니다. 당신은 하이퍼 링크의 다음 속성을 설정할 수 있습니다-

CSS의 의사 클래스를 논의 할 때 동일한 속성을 다시 살펴 보겠습니다.

그만큼 :link 방문하지 않은 하이퍼 링크를 나타냅니다.
그만큼 :visited 방문한 하이퍼 링크를 나타냅니다.
그만큼 :hover 현재 사용자의 마우스 포인터가 위에있는 요소를 나타냅니다.
그만큼 :active 사용자가 현재 클릭하고있는 요소를 나타냅니다.

일반적으로 이러한 모든 속성은 HTML 문서의 헤더 부분에 보관됩니다.

a : hover는 CSS 정의에서 a : link 뒤에 와야하고 a : visited가 있어야 효과를 볼 수 있습니다. 또한, a : active는 다음과 같이 CSS 정의에서 a : hover 뒤에 와야합니다.

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

이제 이러한 속성을 사용하여 하이퍼 링크에 다른 효과를주는 방법을 살펴 보겠습니다.

링크 색상 설정

다음 예제는 링크 색상을 설정하는 방법을 보여줍니다. 가능한 값은 유효한 형식의 모든 색상 이름이 될 수 있습니다.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

다음과 같은 검은 색 링크가 생성됩니다.

방문한 링크의 색상 설정

다음 예제는 방문한 링크의 색상을 설정하는 방법을 보여줍니다. 가능한 값은 유효한 형식의 모든 색상 이름이 될 수 있습니다.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

다음 링크를 생성합니다. 이 링크를 클릭하면 색상이 녹색으로 변경됩니다.

마우스가 위에있을 때 링크 색상 변경

다음 예제는 링크 위에 마우스 포인터를 가져갈 때 링크의 색상을 변경하는 방법을 보여줍니다. 가능한 값은 유효한 형식의 모든 색상 이름이 될 수 있습니다.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

다음 링크를 생성합니다. 이제이 링크 위로 마우스를 가져 가면 색상이 노란색으로 변경되는 것을 볼 수 있습니다.

활성 링크의 색상 변경

다음 예제는 활성 링크의 색상을 변경하는 방법을 보여줍니다. 가능한 값은 유효한 형식의 모든 색상 이름이 될 수 있습니다.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

다음 링크를 생성합니다. 사용자가 클릭하면 색상이 분홍색으로 변경됩니다.