가상클래스(pesudo class)와 가상요소(pesudo element)

2022.04.07

가상 클래스(pesudo-class)

가상클래스는 HTML에 이미 존재하는 클래스를 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것
(:)세미클론 한개 사용

* :link
    방문하지 않은 링크에 스타일 적용
* :visited
    방문한 링크에 스타일 적용
* :hover
    특정 요소에 마우스 포인터 올려놓으면 스타일 적용
* :active
    마우스를 클릭했을 때
* :focus
    마우스를 클릭하고 입력하는 동안 적용
* :first-child
    첫번째 자식
* :last-child
    마지막 자식
* :nht-child(2n+1)
    홀수 번째 자식

가상 요소(pesudo-element)

HTML에 존재하지는 않지만 가상의 요소를 생성하여 스타일을 주는 것
(::)세미클론 두개 사용(세미클론이 하나며도 작동은 되지만 이중클론 권장)
content=""; 가 있어야 가상요소가 만들어지므로 필수 속성    

* ::before
    요소의 콘텐츠 시작 부분에 생성된 콘텐츠 추가
* ::after
       요소의 콘텐츠 마지막 부분에 생성된 콘텐츠 추가

위에 두 요소 사용방법은 아래 링크에서 확인해 주세요
끄적:: CSS선택자