[주말]Color Flipper 만들기

const body = document.querySelector('body');
const btn = document.querySelector('.button');

let colors = [
    'yellow',
    'green',
    'pink',
    '#dc143c',
    'rgba(123, 123, 123, 0.5)'
];


btn.addEventListener('click', colorChange);
function colorChange() {
    const random = parseInt(Math.random() * colors.length);
    body.style.backgroundColor = colors[random];
};

색을 배열로 만들어서 버튼 클릭하면 배경색이 바뀌는 걸 구현해 보았다

 

문제점은 body에 분명히 style을 줬지만 일부만 바뀌었다.

 

해결

body {
    height: 100vh;
    /* Viewport height의 100% */
    margin: 0;
    /* 기본 여백 제거 */
}

여백을 없애니 body가 넓어져서 전체 색 변경이 가능하였다.