자바 스크립트 01. 다크모드와 라이트 모드

※

네이버 메인 페이지를 보면 다크모드와 라이트 모드로 나누어 사용자의 취향에 맞게 설정할 수 있는 기능이 추가되어 있다.

나는 앞으로 리액트를 공부하기에 앞서 자바 스크립트를 복습할 겸, 작성한 코드를 업로드 하려고 블로그를 개설했는데 최종 목표는 책 <클론코딩 트위터>를 참고하여 리액트로 새롭게 리디자인한 트위터 웹 페이지를 만들어보는 것이다.

그런데 트위터를 이용하면서 다크모드가 있었으면 좋겠다! 라는 생각이 들어서 자.스의 첫번째 포스팅으로 이 글을 작성하게 되었다.

 

 

※

자바 스크립트로 무얼 할 수 있는가!

1. HTML을 뼈대를 가진 인형이라고 비유하면 CSS는 외형. 즉, 스타일(패션)이다. 그럼 자바스크립트는?  <마법> 이라 생각한다.

마법? 정말 뜬금없는 비유라 생각할 수 있을 것이다. 그러나 3D 애니메이션으로 따지면 HTML은 폴리곤으로 만든 모델링이고, CSS는 모델링에 입힐 많은 컬러, 텍스쳐, 맵핑이다. 근데 애니메이션을 만드려면 당연히 움직임이 있어야 하지 않는가?

어린 시절에 본 딩동댕 유치원의 뚝딱이도 사람이 손을 이용하여 뚝딱이 인형의 입모양을 만들어내듯, 애니메이션에도 동적인 움직임이 필요하다.

이 비유를 웹 사이트에 적용시켜보면 자바 스크립트는 동적인 움직임을 만드는 기능과 닮아있다고 할 수 있다.

인형을 스스로 움직이게 만들 수 있도록 해주는 마법 같은 언어, 자바스크립트.

그래서 나는 자바 스크립트를 마법이라 이야기 하고 싶다.  (정말 낭만적이라고 생각한다.)

그럼 이제 컴퓨터 앞의 마법사가 되어 개발(마법) 일지를 공유하겠다. 

 

※

 

완성 페이지

코드를 만들면 웹 사이트에 이렇게 띄워진다.

 

 

 

첫번째 header 구역에는 input 태그를 통해 night와 day 버튼을 나란히 두었고

night를 클릭하면 다크모드 배경에 흰 글씨가, day를 클릭하면 위 이미지처럼 되돌아올 수 있게 작성했다.

 

 

    <header>

        <h1> Hello world!!! </h1>

        <p>이 구역은 header 입니다.</p>

        <input type="button" value="night" onclick="

            document.querySelector('header').style.backgroundColor='black';

            document.querySelector('header').style.color='white';

        ">

 

        <input type="button" value="day" onclick="

        document.querySelector('header').style.backgroundColor='white';

        document.querySelector('header').style.color='black';

        ">

    </header>

 

'헤더'부분에만 다크/라이트 모드

 

만약 body 구간 전체에 다크 모드를 적용하고 싶다면.

querySecletor('body')로 변경해주면 된다.

 

 

 

 

 

두번째 main 구역에는 구글 머터리얼 cdn를 링크하여 아이콘 버튼을 만들었다.

span 태그는 마우스 커서가 '클릭' 버튼으로 변하지 않기 때문에 style='cursor:pointer'를 추가해주었다.

 

   <main>

        <p>이 구역은 main 입니다.</p>

        <span class="material-symbols-outlined" style='cursor:pointer' onclick="

            document.querySelector('main').style.backgroundColor='black';

            document.querySelector('main').style.color='white';

            ">

            dark_mode

        </span>

 

        <span class="material-symbols-outlined" style='cursor:pointer' onclick="

            document.querySelector('main').style.backgroundColor='white';

            document.querySelector('main').style.color='black';

            ">

            sunny

        </span>

    </main>

메인태그 안에 적용된 다크/라이트 모드

 

여기까지는 HTML과 CSS으로만 작성된 코드이다.

 

 

 

세번째 footer 구역에는 button 태그를 이용해 버튼을 만들고 스크립트를 적용시켰다.

우선 이미지부터 보자

 

버튼은 하나인데 기능은 두가지!

네이버 메인화면을 보면 다크 모드를 클릭했을 때, 배경이 어두워지고, 글씨는 가독성에 맞는 컬러로 바뀌는데 다시 라이트 모드로 되돌아가려면 다크 모드 버튼이 있던 위치를 한 번 더 클릭했을 때 돌아간다.

 

즉, 버튼은 하나인데 클릭하면 기능은 두가지! 처럼 보인다는 뜻.

 

 

 

    <footer>

        <p>이 구역은 footer 입니다.</p>

        <button type="button" onclick="

            document.querySelector('footer').style.backgroundColor='black';

            document.querySelector('footer').style.color='white';

            document.querySelector('button').style.display='none';

        " value="dark">

            다크모드로 보기

        </button>

        <button type="button" style='display : none'; onclick="

            document.querySelector('footer').style.backgroundColor='white';

            document.querySelector('footer').style.color='black';

        " value="light">

            라이트모드로 보기

        </button>

    </footer>

 

우선 위 두 개의 버튼의 차이점은,

'다크모드'는 클릭(onClick)을 했을 경우 보이지 않아야 할 버튼이므로 style.display='none'을 추가했고, '라이트모드'는 첫 메인화면에서 이미 디폴트로 적용된 모드이므로 아예 button 태그 안 style='display:none'을 시켜서

보이지 않게 만들었다.

 

 

이제 스크립트를 추가하자.

 

 

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>   

<script>

     $('footer>button:eq(0)').click(function(){

        $('footer>button:eq(1)').show();

     });

     $('footer>button:eq(1)').click(function(){

        $('footer>button:eq(1)').hide();

        $('footer>button:eq(0)').show();

     });

   

    </script>

 

다크모드 버튼을 클릭하면 배경이 어두워지면서 라이트모드를 선택할 수 있는 버튼이 등장하게끔 작성했다.

즉, footer 안의 첫번째 버튼(다크모드)을 클릭했을 경우 두번째 버튼(라이트모드)가 등장.

자바 스크립트는 배열 된 순서를 0부터 읽기 때문에, eq(0)으로 작성했다.

button:eq(0)이 footer 안에 있는 첫번째 버튼(다크모드) 셈이다.

 

스크립트 코드를 글로 풀어 설명해보면,

 

" 나! footer 안에 있는 첫번째 button인데, 이걸 클릭하면 footer 안에 있는 두번째 button을 보여(show) 줄거야! 그리고. footer 안에 있는 두번째 button을 클릭했을 때는 두번째 버튼 모습 숨길 것(hide)이고  다시 첫번째 button의 모습을 보여(show)줄 거야! "

 

라는 것이다.