1. 링크(link)의 상태

• 링크는 5가지의 상태를 가지며, 각 생태마다 다른 스타일을 적용할 수 있다.

  1) link

• 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태이다.

  a:link {
   /* href 속성이 명시된 상태 */
  }

링크 클릭 범위 넓히기

• <div> 전체에 링크 클릭 시 이동되도록 클릭 범위를 넓히려면 a 태그에 display: block 속성을 준다.

  a { display: black; }

2) visited

• 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태이다.

  a:visited {
   /* 링크를 클릭해본 상태 */
  }

  3) hover

• 사용자의 마우스 커서가 링크 위에 올라가 있는 상태이다.

  a:hover {
   /* 링크 위에 마우스 포인터가 위치한 상태 */
  }

  4) active

• 사용자가 마우스로 링크를 클릭하고 있는 상태이다.

  a:active {
   /* 링크 위에 마우스 포인터를 두고 좌측 버튼을 계속 클릭하고 있는 상태 */
  }

  5) focus

• 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태이다.

  a:focus {
   /* 링크 위에 키보드 포커스가 위치한 상태 */
  }