[JS ES6] Background-Image 랜덤 변경

📌 KEY POINT

💚 Math.random()을 활용하여 인덱스를 랜덤으로 추출하기
💚 createElement()를 통해 스크립트로 요소를 생성하고 .append()를 활용하여 문서에 삽입하기

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 배경으로 사용할 이미지 3장을 준비하고, 파일명을 배열로 나열한다. (src 속성 연결을 해야하기 때문에 파일명으로 나열)

🩵 이미지 요소를 랜덤으로 추출하기 위해 인덱스 활용
🔹 Math.random() : 0 이상 1 미만 범위에서 실수를 랜덤으로 반환
🔹 images.length를 곱하는 이유 : Math.random()이 반환하는 값에 images.length를 곱하면, 0 이상 images.length 미만의 랜덤한 실수가 반환
🔹 여기서 Math.floor() 를 써주면 내림 처리가 되어 0, 1, 2로 반환되어 변수에 저장된다.
🔹 최종적으로, 랜덤한 이미지가 krImage에 저장

🩵 createElement() : 새로운 요소를 생성

🩵 bgImage.src : 생성한 img요소의 src(이미지 경로)를 설정하는 속성

🩵 .append() : 스크립트로 생성한 img 요소를 대상요소 뒤에 생성시키기
🔹 .pretend() : 대상요소 앞에 생성

<script>
const images = ['img01.jpg', 'img02.jpg', 'img03.jpg'];

const krImage = images[Math.floor(Math.random() * images.length)];

// .createElement() : 태그 생성
const bgImage = document.createElement("img");

bgImage.classList.add("bgimg");

// console.log(bgImage);
bgImage.src = `img/${krImage}`;

document.body.append(bgImage);
</script>