[ JS : UI만들기2 ] 쉽고 빠르게 UI 만드는 법 Learn 하기 (다크모드 만들기)

이번에는 간단한 다크모드 만들기이다.

아이콘은 img도 바꾸는 법도 같이 실습할 수 있도록 이미지로 만들었다.

 

 

복습하자면

UI 만드는 방법은 총 4가지과정으로 이뤄진다.

1. HTML을 만든다.
2. CSS를 만든다
3. HTML에 CSS를 입힌다.
4. JS 작성한다.

 

 1. HTML을 만든다.

<h1>click 👇🏻</h1>
<img src="태양.jpeg" alt="">

 2 . CSS를 만든다

.hidden{
    height: 0;
    visibility: hidden;
}

3. HTML에 CSS를 입힌다.

<h1>click 👇🏻</h1>
<img src="태양.jpeg" class="hidden" alt="">

4. JS 작성한다.

let img = document.querySelector('img')
let h1 = document.querySelector('h1')

// count 변수로 통해서 홀수라면 다크모드 짝수라면 라이트모드로 설정해놓는다.
let count = 0

const imgClick = () => {
    count++
    if(count % 2 === 1) {
        img.src = '달.jpeg'
        document.body.style.backgroundColor = 'black'
        h1.style.color = 'white'
    }else {
        img.src = '태양.jpeg'
        document.body.style.backgroundColor = 'white'
        h1.style.color = 'black'
    }
}

img.addEventListener('click', imgClick)

image 바꾸는 법

image는 src = ''로 바꿀 수 있다.

 

 

 

그러면 끝~!

 

UI만들기 1탄 드랍다운 만들기

[ JS : UI 만들기 ] 쉽고 빠르게 UI 만드는 법 Learn 하기