[CSS]가상 클래스와 가상 요소
가상 클래스 사용자 동작에 반응하는 가상 클래스 :link - 방문하지 않은 링크에 스타일 적용 :visited - 방문한 링크에 스타일 적용 :hover - 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용 :active - 웹 요소를 활성화했을 때 스타일 적용 ex) 웹 요소를 누르고 있을 때 :focus - 웹 요소에 초점이 맞추어져있을 때 스타일 적용 UI 요소 상태에 따른 가상 클래스 :enabled 와 disabled - 요소를 사용할 수 있을 때와 없을 때 스타일 지정 ex) 회원 약관 :checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정 구조 가상 클래스 :root - 문서 전체에 적용 :nth-child(n) 와 :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용 :nth-of-type(n) 와 :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용 :first-child 와 :last-child - 첫 번째, 마지막 요소에 스타일 적용 :first-of-type 와 :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용 :only-child 와 :only-of-type - 하나뿐인 자식 요소에 스타일 적용 그 외 가상 클래스 :target - 앵커 목적지에 스타일 적용 :not - 특정 요소가 아닐 때 스타일 적용 가상요소 가상 클래스 선택자가 여러 태그 중에서 원하는 태그를 선택하기 위해서 사용되는 선택자라면 가상요소는 내용의 일부만 선택해 스타일을 적용할 때 사용한다. ::first-line 와 ::first-letter - 첫 번째 줄, 첫 번째 글자에 스타일 적용 ::before 와 ::after - 내용의 앞뒤에 컨텐츠 추가하기 ex) 제품 목록 옆에 'NEW!!' 텍스트를 추가할 수 있다.