가상 클래스와 가상 요소: 가상 클래스와 가상 요소를 활용하여 특수 스타일링

CSS에서 가상 클래스와 가상 요소는 웹 페이지의 요소에 더 세밀하고 독특한 스타일을 적용하는 데 사용됩니다. 이들은 특정 상태나 조건에 따라 요소의 스타일을 변경하거나, 문서의 특정 부분에 스타일을 추가하는 데 유용합니다. 가상 클래스와 가상 요소의 개념과 주요 사용 예시를 쉽게  설명드리겠습니다.

가상 클래스 (Pseudo-classes)

가상 클래스는 요소의 특정 상태에 스타일을 적용합니다.

1. :hover:
   • 요소에 마우스 커서가 올라갔을 때의 스타일을 정의합니다. 버튼이나 링크에 자주 사용되며, 사용자가 요소 위에 마우스를 올렸을 때 시각적 피드백을 제공합니다.
   • 예: a:hover { color: red; }는 링크에 마우스를 올렸을 때 색상을 빨간색으로 변경합니다.
2. :focus:
   • 키보드로 접근하거나 클릭하여 선택된 요소에 스타일을 적용합니다. 주로 입력 필드나 버튼에 사용됩니다.
   • 예: input:focus { border: 2px solid blue; }는 입력 필드에 포커스가 가면 테두리 색상을 변경합니다.
3. :active:
   • 사용자가 요소를 클릭하고 있는 동안에 스타일을 적용합니다. 이는 주로 버튼이나 링크에 사용되어 클릭 피드백을 제공합니다.
   • 예: button:active { transform: scale(0.98); }는 버튼을 클릭하는 동안 버튼을 약간 축소시킵니다.
4. :first-child, :last-child:
   • 요소의 첫 번째 또는 마지막 자식에 스타일을 적용합니다.
   • 예: li:first-child { font-weight: bold; }는 리스트의 첫 번째 항목을 굵게 표시합니다.
5. :nth-child(n):
   • n번째 자식 요소에 스타일을 적용합니다.
   • 예: li:nth-child(2n) { color: green; }는 리스트에서 짝수 번째 항목의 색상을 변경합니다.

가상 요소 (Pseudo-elements)

가상 요소는 요소의 특정 부분에 스타일을 적용합니다.

1. ::before, ::after:
   • 요소의 내용(content) 전후에 콘텐츠를 삽입하여 스타일을 적용합니다.
   • 예: p::before { content: '※'; }는 모든 <p> 태그의 앞에 별표를 추가합니다.
2. ::first-letter, ::first-line:
   • 텍스트의 첫 글자나 첫 줄에 스페셜 스타일을 적용합니다.
   • 예: p::first-letter { font-size: 200%; }는 단락의 첫 글자를 크게 표시합니다.
3. ::selection:
   • 사용자가 텍스트를 선택했을 때의 스타일을 정의합니다.
   • 예: p::selection { background: yellow; }는 사용자가 단락의 텍스트를 선택했을 때 배경색을 변경합니다.