.className
.className을 사용하면 (ex.h1.className === "active")
클래스 이름이 오타가 났을 경우 찾기 힘들다.
그래서
const clickedClass = "clicked"와 같이 오류를 방지하기 위해 변수에 넣어준다.
classList.remove(),classList.add()
className이 아닌 classList를 사용하면 추가와 삭제에 용이하다.
1.classList : element의 class 내용물을 조작하는 것을 허용한다.
2.contains() : 우리가 정한 class가 HTML element의 class에 포함되어 있는지 말해준다.
if(h1.classList.contains(clickedClass))
=clickedClass가 h1의 classList에 포함이 되어있으면 이라는 뜻
classList.toggle()
classList.toggle() : classList에 class name이 존재하는지 확인
-> 만약 class name이 존재한다면 toggle은 class name을 제거한다.
-> 반대로 class name이 존재하지 않는다면 toggle은 class name을 추가한다.
