[TIL][CSS] CSS 가상 클래스 선택자

CSS에 대하여..

사실 이번에 React 연습으로 Todo List를 만들어 보았는데, 이작업을 하면서 시간이 가장 오래 걸린것이 React가 아닌 CSS 코딩이였다. 그간 JS와 관련된 공부를 해 오면서 사실 HTML과 CSS는 프로그래밍 언어도 아니라서
필요할때 마다 간단한 검색으로 찾아보며 작업하면 점점 익숙해질 것이라 생각하며 등한시했다...

그러나 이번에 작업을 해 보며 그 시간이 너무 불필요하고 번거롭게 느껴졌으며, CSS를 좀 더 잘 다루는것 만으로도
시간을 절약해 JS를 코딩하는데 더욱 힘을 쓸 수 있을것 같다고 느꼇다.
이제부터 조금씩 다시 처음으로 돌아가 CSS와 HTML의 기본을 넘어선 개념들도 익혀가야 할것같다.

---

CSS 가상클래스

CSS는 아래와 같은 선택자로 특정 class(.) id(#) 등을 선택하여 스타일을 지정할 수 있는데, 해당 선택자 뒤에
가상 클래스를 붙여주면 해당 이벤트가 발생했을때 적용될 스타일을 바꿔줄 수 있다!

div {
  display: inline-block;
  width: 10rem;
  height: 10rem;
  margin-left: 100px;
  background-color: red;
  transition: 0.5s; //------------ 트랜지션 효과를 넣어 부드럽게 움직이게 할 수 있다!
}

div:hover {
  display: inline-block;
  width: 10rem;
  height: 10rem;
  margin-left: 10px;
  background-color: red;
}
//--------------- 마우스가 해당 div에 올라갔을 때 스타일이 아래 코드로 바뀌며, 왼쪽으로 80px만큼 이동하게 됨.

가상클래스에는 다음과 같은 여러가지의 이벤트가 있으며, 적절히 사용하면 JS코드를 효과적으로 줄여줄 수 있다!

• :hover 마우스가 올라갔을 때
• :active 마우스로 클릭했을 때
• :focus 클릭하여 포커스 되었을 때
• :visited 링크를 클릭한적이 없을 때

...등 여러가지의 이벤트가 있다.