[JS] CSS in JavaScript

# CSS in JS

 

=== 값이 일치함.
= color를 바꿔줌.

(다른 언어끼리 섞이지 않게) style은 JS가 아니라 CSS에서 변경하는 걸 추천한다.

step1. element를 찾아라.
step2. event를 listen해라.
step3. 그 event에 반응해라.

style에 적합한 도구는 CSS, animation에 적합한 도구는 JS이다.

html 파일은 CSS와 JS문서를 import한다.

에러를 줄이기 위해 raw string을 쓰는 대신, const를 생성하기!
JS로 모든 class name을 변경하지는 않는다.

 

classList는 우리가 class들의 목록으로 작업할 수 있게끔 허용해준다.
className 은 이전 calss를 상관하지 않고 모든 걸 교체해버린다.

classList 를 이용하는 건
js 에서 건드리는 HTML element가 가진 또 하나의 요소를 사용하는 것이다.
= element의 class내용물을 조작하는 것을 허용한다는 뜻

 

constains라는 function은 명시한 class가 HTML element의 class에 포함되어 있는지를 말해준다.
remove라는 function은 명시한 class name을 제거하고
add라는 function은 명시한 class name을 추가한다.

 

function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}

 

그러나 이보다 더 좋은 function이 존재한다.

toggle function은 class name이 존재하는지 확인한다.
class name이 존재하면 toggle은 class name을 제거하고, 

class name이 존재하지 않으면 toggle은 class name을 추가한다.

function handleTitleClick() {
h1.classList.toggle("clicked");
}

toggle은 h1의 classList에 clicked class가 이미 있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다.
만약 class name이 존재하지 않는다면 toggle은 classname을 추가한다.

한 번만 적기 때문에 const도 필요 없다. toggle은 켜고 끄는 버튼같은 거라고 생각하면 된다.