WeniVooks

가상 클래스와 가상 요소

CSS에서는 기본 선택자 외에도 특별한 상태나 위치를 지정할 수 있는 가상 클래스와 가상 요소라는 강력한 도구를 제공합니다. 이들을 활용하면 HTML 구조를 변경하지 않고도 더욱 세밀하고 동적인 스타일링이 가능해집니다.

1. 가상 클래스 선택자

가상 클래스 선택자(Pseudo-class selectors)는 요소의 특정 상태를 선택할 수 있게 해줍니다. 이들은 콜론(:)을 사용하여 표현됩니다.

1.1 동적 가상 클래스

동적 가상 클래스는 사용자의 동작에 따라 변화하는 상태를 선택합니다.

1.1.1 마우스를 오버했을 때

:hover는 마우스 포인터가 요소 위에 올라갔을 때의 상태를 선택합니다. 이를 통해 사용자와의 상호작용을 시각적으로 표현할 수 있습니다.

이 예시에서 버튼에 마우스를 올리면 배경색이 변경됩니다. 이처럼 동적 가상 클래스는 사용자의 동작에 따라 요소의 스타일을 변경할 수 있습니다.

1.2 구조적 가상 선택자

구조적 가상 선택자는 문서 구조 내에서 요소의 위치에 따라 선택합니다.

1.2.1 첫번째와 마지막 요소 선택

:first-child는 형제 요소 그룹 중 첫 번째 요소를, :last-child는 마지막 요소를 선택합니다.

1.2.2 n번째 요소 선택

:nth-child는 형제 사이에서의 순서에 따라 요소를 선택할 수 있게 해줍니다. 이 선택자는 매우 유연하여 다양한 패턴의 선택이 가능합니다.

2. 가상 요소

가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만드는 것입니다. 선택한 요소의 특정 부분에 스타일을 적용할 수 있게 해줍니다. 이들은 이중 콜론(::)을 사용하여 표현됩니다.

2.1 요소의 전과 후

::before와 ::after는 선택한 요소의 내용 앞이나 뒤에 새로운 요소를 만들어 새로운 콘텐츠를 추가할 수 있게 해줍니다. 이들은 주로 content 속성과 짝을지어 장식적인 요소를 추가하거나, 기능적인 목적으로 사용됩니다. 빈태그 img br input 에는 적용할 수 없습니다.