CSS 가상 클래스 활용: 가상 클래스를 사용하여 요소의 특정 부분을 스타일링

1. :hover

• 마우스 오버 스타일링: 요소 위에 마우스 커서가 올라갔을 때 스타일을 적용합니다. 이를 통해 버튼, 링크, 이미지 등에 시각적 피드백을 제공할 수 있습니다.
• 예시: a:hover { color: red; }는 링크에 마우스를 올렸을 때 색상을 빨간색으로 변경합니다.

2. :active

• 활성화 스타일링: 사용자가 요소를 클릭하고 있는 동안 스타일을 적용합니다. 클릭 피드백을 위해 주로 버튼이나 링크에 사용됩니다.
• 예시: button:active { transform: scale(0.95); }는 버튼을 클릭하는 동안 버튼을 약간 축소시킵니다.

3. :focus

• 포커스 스타일링: 요소가 키보드로 접근하거나 클릭하여 포커스를 받았을 때 스타일을 적용합니다. 입력 필드나 선택 가능한 요소에 자주 사용됩니다.
• 예시: input:focus { border-color: blue; }는 입력 필드에 포커스가 가면 테두리 색상을 변경합니다.

4. :first-child, :last-child

• 첫 번째, 마지막 자식 스타일링: 부모 요소의 첫 번째 또는 마지막 자식 요소에 스타일을 적용합니다.
• 예시: li:first-child { font-weight: bold; }는 리스트의 첫 번째 항목을 굵게 표시합니다.

5. :nth-child(n)

• n번째 자식 스타일링: 부모 요소의 n번째 자식에 스타일을 적용합니다. 이는 테이블 행이나 리스트 항목에 자주 사용됩니다.
• 예시: tr:nth-child(even) { background-color: #f2f2f2; }는 테이블의 짝수 번째 행에 배경색을 적용합니다.

6. :checked

• 체크 상태 스타일링: 체크박스나 라디오 버튼이 선택된 상태에 스타일을 적용합니다.
• 예시: input[type="checkbox"]:checked { background-color: blue; }는 체크된 체크박스에 배경색을 적용합니다.

7. :disabled

• 비활성화 상태 스타일링: 비활성화된 폼 요소에 스타일을 적용합니다.
• 예시: button:disabled { opacity: 0.5; }는 비활성화된 버튼의 투명도를 조절합니다.

8. :not(selector)

• 부정 선택자: 지정된 선택자가 아닌 요소에 스타일을 적용합니다.
• 예시: div:not(.active) { color: grey; }는 .active 클래스가 없는 div에 색상을 적용합니다.

9. :after, :before

• 가상 요소 스타일링: 요소의 내용 전후에 콘텐츠를 삽입하여 스타일을 적용합니다.
• 예시: p:before { content: '★'; }는 모든 <p> 태그의 앞에 별표를 추가합니다.

10. :hover와 :focus 결합

• 호버와 포커스 결합: :hover와 :focus를 결합하여 마우스 및 키보드 상호작용에 일관된 스타일을 적용할 수 있습니다.
• 예시: a:hover, a:focus { color: red; }는 링크에 마우스를 올리거나 포커스가 갔을 때 색상을 변경합니다.

11. :valid, :invalid

• 폼 유효성 검사: 입력 필드의 유효성 상태에 따라 스타일을 적용합니다.
• 예시: input:invalid { border-color: red; }는 유효하지 않은 입력 필드의 테두리 색상을 변경합니다.

12. :empty

• 빈 요소 스타일링: 내용이 없는 요소에 스타일을 적용합니다.
• 예시: p:empty { display: none; }는 내용이 없는 <p> 태그를 숨깁니다.