CSS 링크 a

 

a:link { } - 방문 전 링크 상태.

a:visited { } - 방문 후 링크 상태.

a:hover { } - 링크에 마우스를 올렸을 때 상태.

a:active { } - 링크를 클릭했을 때의 짧은 순간.

 

링크 태그를 쓸 때는 순서가 있다. 반드시 link - visitde - hover - active 순서로 써야한다. 나 이거 몰랐어...=-=

 

See the Pen 링크1 by nilgi (@nilgi) on CodePen.

 

 

- text-decoration

text-decorationd은 링크에서 주로 밑줄을 제거할 때 사용한다.

 

a:link {text-decoration: none;}

a:hover {a {text-decoration: none: underline;}

 

 

- background-color

링크 태그에 백그라운드 색을 지정할 수 있다.

 

a:link {background-color: tomato;}
a:visited {background-color: blue;}
a:hover {background-color: red;}
a:active {background-color: white;} 

 

 

- 위의 태그를 이용해 예쁜 링크 버튼 만들기

 

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

 

See the Pen 링크2 by nilgi (@nilgi) on CodePen.