[JavaScript] CSS in JavaScript 2

1. CSS 파일에 스타일 저장하기

** html 파일에 필히 css파일이 소속 되어 있어야 함.

js파일에 스타일 속성을 입력하기도 하지만
css 파일에 입력하는 것이 훨씬 깔끔하다.

h1 {
	color: cornflowerblue;
}

.active {
	color: tomato;
}

active라는 class를 지정해주면 어떤 element, h1, span 등 tomato의 색깔을 가지게 될 것이다.

그 다음엔 js에서 h1의 active class를 css파일에서 전달해주어야 한다.

js파일에서

function handleTitleClick() {
	h1.className = "active";   <---- getter이면서 setter
}

라고 입력해준다.
**active는 임의로 지정해준 것이고, css파일과 js파일의 active가 스펠링 오타 없이 같아야 실행된다. (clicked로 지어주어도 된다)

2. 클릭했을 때 다시 원래 색깔로 돌아오기

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

만약 h1.className이 active라면 h1.className은 ""(비어있다).
하지만 h1.className이 ""(비어있다)라면 active가 될 것이다.

3. active의 위험

코드가 길어지게 되면 오류의 위험성이 있다.

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

위의 코드에서 active도 스펠링이 틀리게 되면 오류가 있을 수 있다.
(active를 간단하게 clicked로 바꿔주자.)
그래서 const로 이름을 지어준다.

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