가상 요소 선택자란?

가상 요소 선택자는 CSS에서 특정 요소의 가상 요소를 스타일링하기 위해 사용되는 선택자로 이 선택자는 HTML에 직접적으로 표시되지 않는 가상 요소를 대상으로 스타일을 적용할 수 있다.

사용이유

1. 시맨틱한 구조 유지: 가상 요소를 사용하면 HTML에 직접적으로 추가하지 않고도 디자인적인 요소를 추가할 수 있습니다. 이는 CSS로만 요소를 만들어 스타일을 적용할 수 있기 때문에 HTML 구조를 보다 깔끔하게 유지할 수 있다.

2. 스타일링: ::before를 사용하여 요소의 앞쪽에 (::after 는 요소 뒤쪽) 콘텐츠를 추가할 때 이 콘텐츠에 스타일을 적용할 수 있다. 이를 통해 특정 요소의 디자인을 보강하거나 부가적인 시각적 요소를 추가할 수 있.

3. 접근성 유지: 가상 요소는 HTML에 직접적으로 표시되지 않기 때문에 접근성에 큰 영향을 미치지 않는다. 이를 통해 시각적인 디자인을 개선하면서도 웹 사이트의 접근성을 유지할 수 있다.

예시

<p class='element'>헬로<p>

.element {
  color: red;
}

.element::before {
  content: "가상 요소 예시";
  color: blue;
}