CSS(SCSS) 가상 선택자

1) hover

• 마우스를 올려 놓고 있을동안에 선택이 되는 가상 클래스

사용 예)

a:hover{
font-size: 30px;
transition: 1s;
color: red;
}

-> 마우스를 올려놨을때 a태그의 Text 색상은 빨간색으로 적용되고, 사이즈가 transition이 1초에 30px로 커짐 마우스 hover를 해제하면 다시 원래 크기로 돌아옴

2) active

• 마우스를 클릭하고 있을동안에 선택 되는 가상 클래스

사용 예)

.box {
width: 300px;
height: 300px;
background-color: orange;
transition: 1s;
}

.box:active {
width: 500px;
height: 500px;
background-color: royalblue;
}

-> Box를 클릭했을때 500px만큼 커지고 색상이 로얄블루로 변경됨 손을떼면 다시 원래 크기로 돌아옴

3) focus

• 선택자 ABC 요소가 포커스 되면 선택되는 가상 클래스

사용 예)

input:focus {
background-color: orange;
}

-> focus 가상 요소 선택자는 실제로 가능한 요소는 input 요소이다(또한 box(div) 요소에 적용시킨다면 tabindex를 이용하고 순서값을 -1로 적용시키면 focus를 사용할 수 있음)