노마드 코더/바닐라 JS로 크롬 앱 만들기
챌린지 11일차
5_hyun
2022. 5. 19. 13:13
반응형
const colors = [
"#ef5777",
"#575fcf",
"#4bcffa",
"#34e7e4",
"#0be881",
"#f53b57",
"#3c40c6",
"#0fbcf9",
"#00d8d6",
"#05c46b",
"#ffc048",
"#ffdd59",
"#ff5e57",
"#d2dae2",
"#485460",
"#ffa801",
"#ffd32a",
"#ff3f34"
];
const Btn = document.querySelector("button");
function BackChange() {
const Random1 = colors[Math.floor(Math.random() * colors.length)];
const Random2 = colors[Math.floor(Math.random() * colors.length)];
const col = `linear-gradient(to right, ${Random1}, ${Random2})`;
document.body.style.background = col;
}
Btn.addEventListener("click", BackChange);
linear-gradient를 사용하면 2가지 색을 같이 사용할 수 있다는 것을 알게되었다.
그리고 배경색을 바꾸려면 backgroundcolor로 하면 안된다. 대신 background나 backgroundImage로 해야 배경색이 바뀐다는 것을 알았다.
반응형