[css challenge] day19 배경 움직이기

See the Pen Untitled by hongshii (@hongshii) on CodePen.

 

 

- 기존 css는 배경을 input과 같은 위치에 두어 css로 조정하게 하였다.

- 나도 자바스크립트 없이 css로만 그렇게 할까 싶었지만 그러려면 input의 위치를 하나씩 잡아야하기 때문에 재사용성이 떨어질 것 같았다.

 

const changeBg = () => {
    for(let i = 1; i<=3; i++) {
        const checkBox= document.getElementById(`check-${i}`);
        checkBox.addEventListener('click', function() {
            const background = document.querySelector('.frame .bg');
            if(checkBox.classList.contains('check-1')) {
                background.style.left = '0px';
            } else if (checkBox.classList.contains('check-2')) {
                background.style.left = '-400px';
            } else {
                background.style.left = '-800px';
            }
        })
    }
}

- 그래서 자바스크립트로 input 아이디가 일정하니까 반복문으로 input을 선택해주었고

- 클래스 이름을 추가해서 배경의 위치를 바꿔주었다.

 

 

https://100dayscss.com/days/19/

Day 19 - 100 Days CSS Challenge