Pseudo-class 셀렉터
.btn:hover {
background : red; /*마우스를 올려놓을 때*/
}
.btn:focus {
background : green; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
background : blue; /*클릭 중일 때*/
}
꼭, hover, focus active 순으로 적어야 오류가 안 남.
input에도 사용 됨.
input:focus {
border : 2px solid red;
}a에도 사용 됨.
a:link {
color : red; /*방문 전 링크*/
}
a:visited {
color : black; /*방문 후 링크*/
} ++참고) text-decoration : none 추가하면 링크 밑줄 제거 가능.
코드양이 줄어드는 class 작명법 (OOCSS, BEM)
class 작성 시, 뼈대와 살을 분리하자!
기본 utility class를 만들어 두고, 클래스 여러 개를 적용시켜 빠르게 스타일링 할 수 있다.
