챌린지 5일차

const title = document.querySelector("h2");
title.style.color = "white";

function BackColorChange() {
    let width = window.innerWidth;

    if (width < 700) {
        document.body.style.backgroundColor = "skyblue";
    } else if (width >= 700 && width <= 1300) {
        document.body.style.backgroundColor = "purple";
    } else {
        document.body.style.backgroundColor = "orange";
    }
}

BackColorChange();
window.addEventListener("resize", BackColorChange);

처음에 함수 안의 if문까지는 생각을 했지만 그 이상은 하지 못했다. 그래서 구글에 검색을 하여 아이디어를 얻고 안보고 코드를 이해하며 짰다.

BackColorChange()를 따로 써주는 이유는 저걸 안써주면 새로고침하면 이벤트가 적용되지 않기 때문이다. 

그리고 창의 가로 너비를 resize로 체크하면서 함수를 수행하도록 코드를 짰다.