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

[pseudo-class 인터랙티브 버튼 만들기]
클릭했을 때 반응 달라지는 속성 적용하기

.cart-button {
       cursor: pointer;
}
--> 갖다대면 누르는 손가락 생김

.cart-button:hover {
    background: chocolate
}
--> 커서 갖다대면 바뀌는 색깔

.cart-button:focus {
    background: green
}
--> 커서 누르고 (다른 곳 안누르면) 유지되는 색깔

.cart-button:active {
    background: yellow
}
--> 커서 누를때 변화하는 색깔

hover, focus, active 넣을때 순서가 중요함 (hofa:호빠)

마찬가지로 input에도 인터랙티브 반응 적용 가능함

.input-test {
    font-size: 20px;
}
.input-test:focus {
    border-bottom: 5px solid blue;
}
--> 글자 입력할 때 아래에 굵은 선 생성됨

.custom-link {
    text-decoration: none;
}
--> 링크의 밑줄 없애기

.custom-link:link {
    color: yellow;
}
--> 방문 전 링크 스타일링 

.custom-link:visited {
    color: darkblue
}
--> 방문 후 링크 스타일링