Strength & Honor

버튼 클릭시 배경화면이 다크모드로 전환되게 만들기 (2)

---

앞에서 버튼 2개를 만들어 다크모드와 데이모드로 변환되게끔 해 보았다.
그럼 이번에는 버튼 1개로 동일한 결과를 나타내도록 구현 해 보자.

코드는 아래와 같다.

    
    <input type='button' value='night' onclick="
        if(document.querySelector('body').dataset.mode === 'day'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            document.querySelector('body').dataset.mode = 'night';
            this.value = 'day';
        }
        else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        document.querySelector('body').dataset.mode = 'day';
        this.value = 'night';
        }
    ">

여기서 === 은 동등비교 연산자로서 왼쪽과 오른쪽이 같은지를 비교해서 같으면 true 를 틀리면 false 를 출력한다.
참고로 html 에서 꺽쇠, 즉 '<' 은 & 와 lt; 를 이어서 사용하는데 여기서 lt 는 less than 즉 오른쪽 값보다 작다이다.
반대로 닫는 꺽쇠, 즉 '>' 은 & 와 gt; 를 이어서 사용하는데 여기서 gt 는 greater than 즉 오른쪽 값보다 크다이다.
if 문은 조건문으로서 구조는,

if() {

} else {

}
위와 같은 구조인데 if 다음에 괄호안의 값이 true 이면 if 문 다음의 명령이 실행이 되고 else 이후의 명령은 실행되지 않는다.
만일 false 이면 if 다음의 명령은 실행되지 않고 else 이후의 명령이 실행된다.

---