바닐라 JS 크롬앱 만들기 CSS in JavaScript #2

---

목표

우리는 CSS를 활용해서 Application의 스타일링을 더 잘할 수 있다! 

style에 적합한 도구는 CSS이고 

Animation에 적합한 도구는 JavaScript이다. 

 

style.css에서 h1 을 색상을 변경하기 위해서는 h1을 적고 color을 선정해주면된다!

body {
  background-color: beige;
}
h1 {
  color: cornflowerblue;
}

만약 .active라는 클래스를 생성해서 컬러를 tomato로 선정하게 되면

이 class를 어떤 element에 지정해 주면 ex) h1이던 span이던간에 tomato 색깔을 가지게 될것이다!

 

이제 자바스크립트에 하고싶은것은 이 h1에 active class를 전달해주고 싶다!

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

function handleTitleClick() {        
    h1.className ="active";
}
  

h1.addEventListener("click", handleTitleClick);

그럼 어렵지 않게 fucntion안에 h1.className 에 Css에 선정한 클래스 이름과 똑같이 입력해주면 된다.

이렇게 하면 전 게시글과 다르게 훨씬더 적은 자바스크립트 코드로 동일한 결과를 얻을수 있어서 좋다.

---

여기서 내가 다시한번 하고 싶은거는 내가 이걸 다시 한번 클릭하면 CSS에 class name을 제거하고 싶다. 

마우스를 클릭하면 active클래스가 실행되어 h1의 색상을 토마토 색상으로 바꾼다

지금 h1.className은 Getter 이면서 Setter이라는것이다. 

만약 우리가 console.log로 h1.className을 출력하면 현재의 class를 얻을수도 있고 현재의 class를 변경할 수도 있다.

만약 h1의 class name이 active이면 classname을 제거하고 싶으니까 h1.className을 비워줄것이다. 

만약에 h1의 class name이 active가 아니면 else로 처리해야한다! 

만약에 (=) 부호가 하나라면 , 왼쪽 값(h1.className) 을 부호 오른쪽 ("active")에 있는 값으로 변경해주는것! 

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

function handleTitleClick() {        
    if(h1.className ==="active") {
        h1.className = "";
    }else {
        h1.className = "active";
    }
}
  

h1.addEventListener("click", handleTitleClick);

여기서 또한 CSS를 통해 색깔이 5ms동안 색깔이 바뀌도록 추가할 수 도 있는데

transition을 통해서이다! 

 

하지만 여기서 또 코드가 더 개선할 여지가 있다는데?!!

자세히 보면 우리는 문자열 코드 String을 두번 사용하고 있다 ("active") 

이것들은 error의 리스크가 있다. CSS와 JS에서 하나라도 틀리면 작동이 안되기떄문에!

그것을 방지하기위해 우리가 할수있는건 constant를 생성하고 clikedClass = "clicked"

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

function handleTitleClick() {       
    const clickedClass = "clicked" 
    if(h1.className ==="clickedClass") {
        h1.className = "";
    }else {
        h1.className = "clickedClass";
    }
}
  

h1.addEventListener("click", handleTitleClick);

String을 변수에 저장하는건 매우 유용하다! 변수가 오류가 나면 콘솔에서 오류를 알려줄것이기 떄문! 

 

또한 중요하게 우리가 해야하는 것은 JavaScript로 모든 class name을 변경하지 않는것이다 

왜냐하면 Javascript에서 classname을 변경해버리면 Html에서 class를 h1의 지정했더라도 과거의어떤것이 있어도 다 사라지기 때문이죠 

---

다음으로 볼것은 classname을 바꿀때 특정한부분의 classname만 변경할수 있는 방법은 무엇인지? 알아보려고한다!