숑숑이의 개발일기
[HTML+CSS] #1 Pseudo-class(가상 클래스)
Frontend/HTML+CSS 2023. 3. 15. 21:59

Pseudo-class(가상 클래스) - 여러 상태에 따른 스타일을 지정해 줄 수 있다 문법 selector:pseudo-class { property: value; } 주로 btn, a, input 태그와 결합하여 사용한다 .btn {background: blue;} /* 기본 상태 */ .btn:hover {background: pink;} /* 마우스 호버시 */ .btn:focus {background: plum;} /* 클릭 후 계속 포커스 상태일 때 */ .btn:active {background: yellow;} /* 클릭 중일 때 */ 단 hover, focus, active를 동시에 스타일링 할 경우 해당 순서대로 작성하여야 정상작동 한다 입력 요소의 가상 클래스 (input) :auto..