[JavaScript] CSS 와 JavaScript의 분리/ 코드 작성법

style 에서 하는 게 좋다.

다른 종류의 코드들과 섞이지 않게

 

1. element를 찾아라

2. event 를 listen 해라

3. 그 event에 반응해라

 

style 이 JavaScript 안에 있는 것은 그렇게 현명한 방법이 아니다.

style 작업에 적합한 도구는 CSS이다. animaition에 적합한 것은 JavaScript이고

 

이제 자바스크립트는 CSS와 직접 대화하지 않게 되었다.

 

JavaScript 는 HTML 을 변경하고(.className)

CSS 는 HTML을 바라보고 있다. 

 

조건문을 추가해주어 클릭시 클래스 추가 및 삭제를 해주었다.

CSS의 transition 갑을 주어 부드러운 색 전환을 할 수도 있다.

 

 

active 라는 클래스 이름은 raw value라고 하는 개발자가 정한 그저 이름일 뿐이다. CSS의 값과 HTML에서의 두번의 정확한 수정을 해야지만 정확하게 동작하게 되는 것이다.

 

이렇게 하나의 변수로 선언해 놓고 사용하면 수정에 따른 오류의 가능성도 줄여줄 뿐아니라

변수명을 잘못 적어주면 선언되지 않은 변수라며 브라우저의 콘솔창에서 확인해 줄 수가 있다.

그렇기에 string을 변수에 저장하는 것은 굉장히 유용하다