Strength & Honor

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

---

엘리님의 강의가 너무 어려워 다시 초심으로 돌아가야겠다고 생각을 했다.
유튜버, 생활코딩님의 강의는 내가 코딩에 입문하면서 최소 3번씩 반복해서 보았던 것이다.
그때는 머릿속에서만 넣어두었는데 이번에는 하나하나씩 자바스크립트 기초를 정리해 나가도록 하겠다.

이번 강의는 유투버, 생활코딩님의 강의를 빌려서 정리 해 보자.
먼저 night 과 day 버튼을 만들어 버튼을 누를때 다크모드로 전환되게끔 해 보자.

위의 버튼을 클릭하면 클릭할때마다 배경이 다크모드로 전환되고 다크모드시 글자는 흰색으로 보여지고 다시 데이코드로 전환시 글자는 검은색으로 보여진다.

이에대한 소스코드는 아래와 같다.

        
    <h4>
    <input type='button' value='night' onclick="
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
    ">

    <input type='button' value='day' onclick="
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
    ">
    </h4>

버튼을 만드는 방법은 여러가지가 있으나 심플하게 input 태그를 이용하였고 button 속성을 부여하였다.
글자 크기는 앞에서 h 태그로 정하였고 버튼을 클릭할때마다 어떠한 명령이 동작되도록 하기 위해 onclick 이라는 명령을 주었다.

document.querySelector('body') 라는 뜻은 이 문서에서 body 태그를 선택하라는 명령이다.
style.backgroundColor 은 배경화면색을 지정해 주는 명령이다.

즉, 배경화면을 검은색으로 바꿀때에는 글자색을 흰색으로, 흰색으로 바꿀때에는 글자색을 검은색으로 하라는 명령이 되겠다.

---