1. 가상 클래스와 가상 요소란 무엇인가?
2. 가상 클래스와 가상 요소의 사용 예시
3. 결론

1. 가상 클래스와 가상 요소란 무엇인가?

CSS에서 “가상 클래스”와 “가상 요소”는 선택자에 추가적인 정보를 제공하여 특정 상황에 스타일을 적용할 수 있도록 합니다. 가상 클래스는 사용자의 동작이나 요소의 상태에 따라 스타일을 적용하며, 일반적으로 요소의 상태를 나타냅니다. 예를 들어, :hover, :active, :focus와 같은 것이 있습니다.

가상 요소는 문서의 특정 부분을 선택하기 위해 사용됩니다. 예를 들어, ::before, ::after를 사용하여 요소의 내용 앞이나 뒤에 가상의 요소를 생성하고 스타일을 적용할 수 있습니다.

2. 가상 클래스와 가상 요소의 사용 예시

2.1 가상 클래스의 사용 예시

/* 링크에 마우스를 가져다 댔을 때 스타일 변경 */
a:hover {
  color: red;
}

/* 입력 요소에 포커스를 받았을 때 스타일 변경 */
input:focus {
  border: 1px solid blue;
}

2.2 가상 요소의 사용 예시

/* 요소 내부의 내용 앞에 가상 요소를 생성하고 스타일 적용 */
p::before {
  content: "알림: ";
  font-weight: bold;
}

3. 결론

가상 클래스와 가상 요소는 CSS에서 특정 상황에 맞춰 스타일을 적용할 수 있도록 도와줍니다. 이를 통해 다양한 상호작용이나 문서의 특정 부분에 다양한 스타일링을 적용할 수 있습니다.

참고 문헌:

• MDN Web Docs
• MDN Web Docs