const h1 = document.querySelector("div.hello:first-child h1")

const Cname ="clicked";
//오타를 내면 class name 처리가 안되고 찾기 힘들기때문에 원하는 class명을 상수로 선언한뒤 사용하는것이 오류가 적다
function hadnleTitleClick(){
   if(h1.className==="active"){
		//클래스 이름이 active라면
    h1.className=Cname;
//클래스 이름을 선언한  Cname으로 변경
   }else{ //active가 아니라면
   h1.className="active";}
//active로 변경
   console.log(h1.className)

}
h1.addEventListener("click",hadnleTitleClick)

body{
    background-color: antiquewhite;
}

h1{
    color  : cornflowerblue;
    transition: color .5s ease-in-out
//색이 변하는 시간을 5초 선언 효과 ease-in-out
}

.active{
    color : tomato
}

.clicked{
    color : cadetblue;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

• 각 클래스마다 스타일을 주고 자바스크립트로 클래스이름을 변경하거나 부요한다
• className을 classname이라고 써서 작동하지 않는 오류가 있었다

function hadnleTitleClick(){
   if(h1.classList.contains("active")){
    h1.classList.remove("active");
   }else{
   h1.classList.add("active");}
   console.log(h1.className)

}

• classList.contains(클래스명) : 클래스 명은 여러개 소유할수있기때문에 가지고있는 클래스 이름중에 ()안의 값이 있는지 확인하여 true false로 반환한다.
• classList.remove(클래스명) : ()괄호안에 있는 클래스 명만 삭제한다, 나머지 클래스명은 유지한다.
• classList.add(클래스명):클래스 목록을 지우지 않고 ()괄호안의 클래스 명을 뒤에 추가한다

Toggle

function hadnleTitleClick(){
  h1.classList.toggle("active")

}

• toggle을 활용하여 위에 코드를 한줄로 줄일수있다.
• toggle은 ()값이 있을때는 삭제, 없을때는 더해주는 코드이다
• 위 코드는 함수를 실행하면 classList에서 ()값이 없으면 클래스명에 추가하고 있으면 삭제하는 행동을 한다.
• 공식문서 : toggle은 토큰값을 추가하고 삭제하는 역할을 하는 코드이다.