<CSS> active, hover, press 차이

<CSS> active, hover, press 차이

CSS에서 :active, :hover, 그리고 :focus는 요소에 사용자 상호작용에 따라 다르게 스타일을 적용하는 데 사용되는 가상 클래스(가상 선택자)입니다. 
이들 각각의 동작과 차이점은 다음과 같습니다:

hover : 마우스를 올리고 있는 동안 
active : 마우스를 클릭하고 있는 동안
visited :  마우스를 한번 클릭 한 이후

:active:
- :active 가상 클래스는 요소가 활성화되었을 때 적용됩니다. 
ⓐ 이는 주로 클릭한 순간에 발생합니다.
ⓑ 예를 들어, 버튼을 클릭하면 버튼이 활성화되어 눌린 상태를 나타내기 위해 :active 스타일을 적용할 수 있습니다.

```javascript
button:active {
  background-color: red;
}
```

:hover:

- :hover 가상 클래스는 마우스 포인터가 요소 위에 있을 때 적용됩니다. 
ⓐ 이는 요소에 마우스를 가져다 댔을 때 발생합니다.
ⓑ 주로 링크(앵커) 요소에 사용하여 링크에 호버 효과를 주는 데 사용됩니다.

```javascript
a:hover {
  color: yellow;
}
```

:focus:

:focus 가상 클래스는 요소가 포커스를 받았을 때(일반적으로 키보드 탐색 또는 탭 키로 요소를 선택한 경우) 적용됩니다.
ⓐ 주로 입력 요소(텍스트 상자, 버튼)와 같은 사용자 입력을 기다리는 요소에 사용됩니다.

```javascript
input:focus {
  border: 2px solid green;
}
```


.joinBtn {
    width: 10em;
    height: 5ex;
    background-color: gold;
    border: 2px solid firebrick;
    border-radius: 10px;
    font-weight: bold;
    color: black;
    cursor: pointer;
}

.joinBtn:hover {
    background-color: bisque;
}
.joinBtn:active {
    background-color: bisque;
}

이러한 가상 클래스들은 사용자 경험을 향상시키고 요소의 시각적 상태를 변경하기 위해 유용하게 활용됩니다. 
CSS를 사용하여 이러한 가상 클래스를 조합하면 요소에 다양한 스타일을 적용할 수 있습니다.