[javascript] 8. 다크모드 구현하기 & 변수

🌙 다크모드 구현하기

클릭할 때마다 모드가 dark<->light 로 바뀌도록 하기

<span class="badge ms-auto mx-3 bg-dark">Dark 🔄</span>

ms-auto mx-3은 Bootstrap CSS 클래스이다

ms-auto

• ms-auto는 margin-start (왼쪽 여백)을 자동으로 설정합니다.
• 이 클래스를 사용하면 요소가 부모 컨테이너의 시작 부분(보통 왼쪽)으로부터 최대한 멀리 배치
• 즉, - 오른쪽으로 밀어넣는 효과

mx-3

• mx는 margin-x를 나타냄
• mx-3는 마진 크기 가로 방향(양쪽) 마진을 설정
• 1부터 5까지의 크기를 가질 수 있으며, 숫자가 커질수록 마진 크기가 증가

---

1. 텍스트 변경 ver

 $('.badge').on('click',function(){
     count++;
     if (count % 2 == 1) {
       $('.badge').html('Light');
     } else {
       $('.badge').html('Dark')
     }
  } )

2. 배경색 변경 ver

jQuery 문법으로 태그를 선택할 때는 'body' 이런식으로 하면 된다

dark css 는 따로 지정해주었다

$('.badge').on('click',function(){
            count++;
            $('body').toggleClass('dark')
            } )

---

변수 정리

var	let	const
재선언 O	재선언 X	재선언 X
재할당 O	재할당 O	재할당 X
함수 범위	스코프 범위	스코프 범위