3.6~3.8

3. JAVASCRIPT ON THE BROWSER

3.6 CSS in JS

JS로 css와 소통하기

1. element찾기
2. event를listen하기
3. event에 반응하기
   • 무언가를 보여주거나, 감추거나, 색깔을 빠꾼다거나 등등

---

3.7 CSS in Javascript part Two

▶️ CSS로 스타일을, JS에서는 애니메이션설정을 하는것 추천

JS로 HTML태그에 class 적용하기_className

1. HTML 이 JS와 CSS파일에 모두 연결되어있는지 확인
2. CSS에 추가하고 싶은 스타일 class 로 저장

   .active{
      background-color: purple}

3. JS에 태그이름.className ="classname"

   h1.className = "active"

• 태그이름.className ="classname"은 class 를 가져올수도, 변경해 줄 수도있다.
  - class변경시, 기존에 있던 class를 없애고 새로운 변수로 저장이 된다.
• 에러를 최소화 해주기위해, class이름을 변수에 저장해두는 것이 좋다.

---

3.8 CSS in Javascript part Three

JS로 HTML태그에 class 적용하기_classList & toggle

classList

▶️ classlist는className과 달리, class목록으로 작업할 수 있기 때문에 class를 유지 / 추가 / 삭제 모두가능하다.

• classlist속성
  • .contain() = 해당 class가 적용되어 있는지 확인하여 boolean값을 리턴.
  • .remove() = 해당 class를 제거.
  • .add() = 해당 class를 추가

toggle

▶️ class가 적용되어 있으면 제거, 없으면 추가해줌

h1.classList.toggle('class이름')

---

(코드챌린지) 풀고 제출완료

포인트!!

▶️ JS로 html태그에 class 추가 /제거하기
▶️ window의 넓이는 window.innerWidth
▶️ if / else if 사용

---

(Quiz) 🥳