가상클래스

가상 클래스(:pseudo-class) : 화면의 특정 요소에 커서가 향했을 때 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀주는 역할을 한다. 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입힐 수 있다.
가상 요소(Pseudo-element) : 실제로 존재하지 않는 요소를 만들어 주는 역할이다.

:hover

마우스가 선택된 요소 위에 있다면 요소의 스타일을 지정된 값으로 변경합니다.

div {
	width: 100px;
	background-color: white; 
    }
div:hover { background-color: blue; }

:active

마우스가 요소를 클릭하고 요소를 벗어나는순간까지 요소의 스타일 변경합니다

div { 
	width: 100px;
	background-color: white; 
    }
div:focus { background-color: red; }

:focus

마우스로 요소를 클릭하면 요소의 스타일 변경합니다.

div { 
	width: 100px;
	background-color: white; 
    }
div:focus { background-color: red; }

::before , ::after

요소의 앞뒤에 추가로 스타일을 조건에따라 변경합니다.

div::before {
        content: 'hello';
    }
div::after {
        content: 'bye';
    }