css / peseudo-class

버튼 같은 걸 만들 때
클릭 시 색이 변하게 하거나, 포인터로 변하게 하거나 등등
효과를 주는 것에 대한 주제이다

버튼 같은 걸 클릭하려고 보면 마우스 포인터가 손 모 양처럼 바뀌는 걸 볼 수 있는데

세세한 것 전부 css 스타일링을 통한 것이다

먼저 버튼을 만들어 준 후
그 버튼에 대해서만 cursor의 옵션을 부여해 주어야 하는데

<button class="btn"> 버튼 </button>

 // css
.btn{
  cursor: pointer;
}

의 옵션을 부가해 주면 버튼을 올릴 때 포인터가 손가락 모양으로 바뀌는 걸 볼 수 있다.

그것보다 더 나아가서 버튼에 포인터를 올리게 되었을 때 색이 조금 더 진하게 바뀌는 경우도 볼 수 있다.

<button class="btn"> 버튼 </button>

 // css
.btn{
  cursor: pointer;
}
.btn:hover{
  background-color : chocolate;
}

를 사용해 보면 hover => 즉 마우스를 위에 올렸을 때 초콜릿 색상으로 바꿔주세요라는 뜻이다.

그렇다면 클릭 중 일 때의 색상은 어떻게 바꿀까?

<button class="btn"> 버튼 </button>

 // css
.btn{
  cursor: pointer;
}
.btn:hover{
  background-color : chocolate;
}
.btn:active{
  background-color : brown;
}

active => 효과를 주게 되면
1. 마우스를 올렸을 때는 초콜릿
2. 클릭 중 일 때는 브라운 색상이 된다.

한 가지 더 focus라는 속성이 있는데
내가 클릭을 했는지 안 했는지 깜박하는 사람들을 위해 클릭을 했다면 색상을 부과해 인식할 수 있게 해주는 방법이다.

<button class="btn"> 버튼 </button>

 // css
.btn{
  cursor: pointer;
}
.btn:hover{
  background-color : chocolate;
}
.btn:active{
  background-color : brown;
}
.btn:focus{
  background-color : grey;
}

focus => 클릭 이후에는 grey 색상.
하지만 3가지를 모두 사용하고 싶을 때는 꼭

순서를 지켜서 사용해야 한다

뒤죽박죽될 시 버그가 발생..

물론 버튼뿐만 아니라
많이 사용하는 input / link 등도 사용할 수 있습니다.

<a href="#"> 링크 </a>

// css

a:visited{
color:red;
}
또는
a {
color: yellow;
}

기본적으로 클릭 시 색이 보라색으로 바뀌게 되는데 등등
사용하여 색도 바꾸기가 가능합니다