CSS 가상 클래스(Pseudo-classes)와 가상 요소(Pseudo-elements)의 차이점을 설명하고, 각각을 실제 웹 개발에서 어떤 목적으로 활용할 수 있는지 2가지 이상의 구체적인 예시를 들어 설명해주세요.

면접관님, CSS 가상 클래스와 가상 요소는 웹 페이지의 특정 상태나 부분을 선택하여 스타일을 적용하는 데 사용됩니다.

가상 클래스는 요소의 특정 상태를 선택합니다. 예를 들어 :hover는 마우스가 올라갔을 때, :nth-child(n)는 n번째 자식 요소를 선택합니다. 링크에 마우스를 올렸을 때 색상을 변경하거나, 테이블 행에 번갈아 다른 배경색을 적용하는 데 활용할 수 있습니다.

가상 요소는 요소의 특정 부분을 선택합니다. ::before와 ::after는 요소의 앞이나 뒤에 가상의 요소를 생성하여 스타일을 적용합니다. 텍스트 앞에 아이콘을 추가하거나, 인용구의 시작과 끝에 따옴표를 넣는 데 유용합니다. 가상 요소는 DOM에 실제로 존재하지 않기 때문에 HTML 구조를 변경하지 않고 스타일을 추가할 수 있다는 장점이 있습니다.