선택자

&:hover, &:focus, &:active, 및 &.active는 SCSS (또는 CSS)에서 특정 HTML 요소의 다양한 상태에 스타일을 적용하기 위해 사용되는 선택자입니다. 이들은 각각 마우스 오버(hover), 포커스(focus), 활성화(active), 그리고 클래스 기반 활성화(active) 상태를 나타냅니다. 아래에서 각각의 선택자에 대해 설명하고 사용 예를 들어 보겠습니다.

&:hover

설명: 사용자가 마우스로 요소 위에 올렸을 때 적용되는 스타일입니다.
예시:
```
.button {
  background-color: blue;
  &:hover {
    background-color: lightblue;
  }
}
```
여기서 .button 클래스를 가진 요소는 기본적으로 파란색 배경을 가지지만, 마우스 오버 시에는 연파랑색으로 변경됩니다.

&:focus

설명: 요소가 키보드 입력이나 마우스 클릭 등으로 포커스를 받았을 때 적용되는 스타일입니다. 주로 입력 필드나 버튼 등에서 사용됩니다.
예시:
```
.input-field {
  border: 1px solid gray;
  &:focus {
    border: 1px solid blue;
  }
}
```
이 경우, .input-field 클래스를 가진 요소는 포커스를 받을 때 테두리 색상이 회색에서 파란색으로 변경됩니다.

&:active

설명: 요소가 활성화되었을 때 (예: 버튼을 클릭하고 있는 동안) 적용되는 스타일입니다.
예시:
```
.button {
  background-color: blue;
  &:active {
    background-color: darkblue;
  }
}
```
여기서 .button 클래스를 가진 요소는 클릭되는 동안 어두운 파란색으로 변경됩니다.

&.active

설명: 'active'라는 클래스가 추가된 요소에 적용되는 스타일입니다. 이는 주로 탭, 드롭다운 메뉴, 캐러셀 등에서 현재 활성화된 아이템을 표시하는 데 사용됩니다.
예시:
```
.tab-item {
  &:active {
    color: blue;
  }
}
```
이 경우, .tab-item 클래스에 active 클래스가 추가된 요소는 파란색 글씨로 표시됩니다.

이러한 선택자들은 사용자의 상호작용에 따라 요소의 스타일을 동적으로 변화시키는 데 유용하게 사용됩니다. SCSS에서는 & 기호를 사용하여 현재 선택자를 참조하고, 이를 통해 더 간결하고 구조화된 방식으로 스타일 규칙을 작성할 수 있습니다.

# 선택자

# &:hover

# &:focus

# &:active

# &.active

선택자

&:hover

&:focus

&:active

&.active