CSS에서 active vs focus

css를 이용해 버튼이나 위젯에 이벤트를 주려 할 때가 많은데, active와 focus의 차이를 모르겠어서 쓰는 글이다..
나는 주로 focus와 hover만 많이 썼는데, active라는 것도 있다.

1. :active: 요소가 사용자에 의해 활성화되었을 때 적용됨. 주로 마우스 클릭 또는 터치 이벤트 등에 반응하여 요소에 스타일을 적용하는 데 사용됨. 예를 들어, 버튼을 클릭했을 때 색상이 변경되거나, 클릭한 요소에 테두리가 표시되는 등의 효과를 줄 수 있음.

2. :focus: 요소가 포커스되었을 때 적용됨. 주로 키보드로 탐색할 때나, 마우스 이벤트 없이도 요소에 포커스를 줄 때 사용됨. 예를 들어, 입력 필드에 포커스가 있을 때 테두리가 표시되거나, 링크가 포커스되었을 때 밑줄이 표시되는 등의 효과를 줄 수 있음.

간단히 말해서, :active는 사용자가 요소를 활성화할 때 (클릭 등), :focus는 요소가 포커스될 때 (키보드 탐색 등) 적용된다. 이 두 가상 클래스는 각각 다른 사용자 상호작용에 반응하여 스타일을 변경하는 데 사용된다.

.chat {
    width: fit-content;
    min-height: fit-content;
    background-color: white;
    padding: 0.8rem 1.0rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d3d8;
    font-size: 18px;
    font-weight: bold;
    margin-left: 1rem;
    text-decoration: none;
    color: black;

     /* 호버 상태 */
     &:hover {
        background-color: #f2f3f6;
        color: #4D5159;
    }

    /* 활성 상태 (버튼이 눌렸을 때) */
    &:active {
        color: black;
    }
}