[CSS] active와 focus의 차이

 

 

 

 

이메일 폼을 만들던 중.. 이메일이 유효하지 않은 상태에서 다음 버튼을 누르면 주황색으로 변하는 문제가 있었다. (이메일이 유효한 상태에서만 주황색으로 변하게 하고 싶음)

 

 

내가 원하는 건 변하지 않게 하는 것..!

 

그래서 active를 사용해서 이메일이 유효하지 않은 경우 버튼 클릭 시 그레이 색으로 유지되도록 코드를 짰는데 계속 주황색으로 바뀌었다. 

 

구글링 도중 스택오버플로에서 나와 비슷한 상황이신 분을 발견했고 active가 아닌 focus로 하는게 적절하다는 답변을 보았다. 이후에 active 대신 focus를 적용했더니 문제해결! 

 

그래서 오늘은 active와 focus에 대해 알아보았다.

 

 

 

active와 focus

---

acitve나 focus 둘 다 user의 action에 따라 스타일링의 변화를 주고 싶을 때 사용하는 선택자(User Action Pseudo-classes)이다. 

 

둘은 비슷해보이지만 차이가 있다.

 

먼저 focus는 해당요소에 focusing이 되었을 때 스타일을 적용해 준다.

아래와 같이 input을 눌러 focusing이 되었을 때, background-color를 변하게 하고 싶으면 사용한다.

 

 

 

 

 

active는 해당 요소를 마우스로 누르는 찰나에(활성화) 스타일을 적용해 준다.

 

 

 

이외에도 link, visited, hover 등 여러가지 선택자가 존재하기 때문에 여러가지를 사용해보면 좋을 거 같다.