6일차 toggle의 위력

전날에 자바를 이용해서 h1을 꾸미고 바꿨는데

꾸미는 기능은 CSS에 맡겨두는 것이 간단하다.

 

CSS에서

h1 {

    color : cornflowerblue;

    transition: color 0.5s ease-in-out; - 색을 천천히 바뀌게하는 고급기술

}  h1의 색상을 변경하고

 

.clicked {

color : tomato;

} - clicked라고 하면 색이 토마토색이 된다고 적는다.

이후 JS에서

function handleTitleClick(){

    h1.className = "clicked";

    }

라고 하면 className을 지정해서 토마토색으로 바뀜

그리고 “clicked”라고 적는 것 보다

이것을 변수로 지정하면 오류가 났을 때 찾기 쉬워서 변수로 지정하는 것이 유용하다.

 

하지만 이미 h1에 다른 class가 할당되어있다면? 저대로면 기존 것은 대체되어버린다!

따라서 classList를 사용해서 "clicked“가 포함(contains)되었는지 판단하고, 추가(add)그리고 제거(remove)를 해야한다.

 

const h1 = document.querySelector(".hello h1"); / h1을 짧게 변수화

function handleTitleClick(){ / handleTitleClick 이라는 기능은

if ( h1.classList.contains("clicked")) {/ h1 클래스 중에 clicked가 있으면

h1.classList.remove("clicked");/ clicked를 제거하고

} else{                         / 아니면

h1.classList.add("clicked");/ clicked를 추가한다

}

}

h1.onclick = handleTitleClick;/ h1을 클릭하면 handleTitleClick을 실행한다.

색하나 바꾸는데도 참 많은 노력이 드는구나 싶은 순간

'toggle'을 만났다

얘는

 

h1.classList.toggle("clicked")

 

이 한줄이면 위의 모든일을 다했다.

 

와우....

 

사실 10여분짜리 강의임에도 따라하고 이해하느라 오래걸려서

'개발은 해야할게 많은 힘든일이구나'

하고 조금 두려워졌었는데

toggle을 한번 적고나니

허탈하다기보다는 통쾌했다

 

배우는것에 재미를 가져본것이 정말 오랜만인 것 같다.