[CSS] Pseudo-class 알아보기

 

Pseudo-class를 사용하면 상태에 따라서 스타일을 줄 수 있습니다.

| 사용

<div class='box'></div>

.box {
  width:200px;
  height:200px;
  background-color:#6799FF;
}

.box:hover {
  background-color:#A566FF; /* 마우스를 요소에 올리면 동작함 */
}
.box:active {
  background-color : #BCE55C; /* 마우스로 요소를 클릭하면 동작함 */
}

이런 식으로 동작합니다.

| 종류

1. :hover - 마우스 커서가 해당 요소위에 올라가 있으면 동작

2. :active - 마우스로 요소를 클릭하고 있으면 동작

3. :visited - 해당 링크에 연결된 페이지를 방문한 상태면 동작

4. :focus - input요소에 초점이 맞춰지면 동작

.

.

.

등등 여러 가지가 있습니다.