12. CSS 와 JavaScript (+ toggle)

function titleclick() {
	const clickedClass = "clicked";
    if(h2.classlist.contains(clickedClass); {
    	h2.classlist.remove(clickedClass);
    }
    else {
    	h2.classlist.add(clickedClass);
    }

=> 클릭 시 clicked가 있으면 없애고 있으면 추가함.

      이 때 h2는 const h2임.

 

 

① 변수에 class를 작성하여 오류를 최소화함.

ⓐ class name을 작성한 것.

ⓑ classlist는 HTML element가 가진 또 하나의 요소를 사용하고,

    element의 class 내용물을 조작하는 것을 허용함.

    classname은 모든 걸 교체하고 이전의 class는 상관하지 않음.

ⓒ 우리가 명시한 class가 HTML element의 class에 포함되었는지 말해줌.

ⓓ 제거

ⓔ 추가

 

 

위의 긴 코드를

function titleclick() {
	h2.classlist.toggle("click");
    }

이렇게 변경 가능.

 

.toggle은 class name이 존재하는지 확인 후 있다면 제거, 없다면 추가함.