pseudo-class로 인터랙티브 버튼 만들기

상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터

.btn:hover {
  background : chocolate; /*마우스를 올려놓을 때*/
}
.btn:focus {
  background : red; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
  background : brown; /*클릭 중일 때*/
}

pseudo-class 셀렉터를 붙이면 여러 상태에 따른 스타일을 지정해줄 수 있다. hover, focus, active 스타일을 넣을 때는 꼭 이 순서대로 해야한다는 것을 이념하자.

input에도 pseudo-class를

input:focus {
  border : 2px solid red;
}

input 태그에 커서가 찍혀있을 때 input 태그에 스타일을 주고 싶다면 저렇게 해보자. 당연히 :focus 셀렉터를 이용하면 된다.

a 태그에도 마찬가지로 pseudo-class

a:link { 
  color : red; /*방문 전 링크*/ 
} 
a:visited { 
  color : black; /*방문 후 링크*/ 
} 

:link를 붙이면 방문 전 링크를 스타일링 할 수 있고, :visited를 붙이면 방문 후 링크를 스타일링 할 수 있다.
a 태그에 거슬리는 밑줄은 text-decoration: none으로 제거할 수 있다.