#6.1 랜덤으로 이미지 보여주기(Background/바닐라 JS로 크롬 앱 만들기)

화면 배경을 랜덤 이미지로 꽉 채우기 위해
js로 img 요소를 생성하고 src에 이미지 파일이 랜덤으로 들어가게 했다.

우선 img폴더에 이미지 파일을 넣고 파일명을 숫자인 0.jpg, 1.jpg,...로 정리하고
js파일에 이미지 파일들을 배열로 정리해주었다.

const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];

그리고 지난 랜덤으로 명언 뽑아내기 편에서 했던 방법과 동일하게 작성해서
이미지를 랜덤으로 가져왔다.

Math.random(); 0~1사이의 랜덤 숫자 가져오기
Math.random() images.length; 배열의 길이를 곱해주기
Math.floor(Math.random() images.length); 내림하여 정수로 만들어주기
images[Math.floor(Math.random() * images.length)]; images에서 호출하기

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.createElement("img")로 img 태그를 만들어 bgImage로 선언하고
src속성에 이미지 파일이 있는 폴더/파일명이 들어갈 수 있게 했다.

document.body.appendChild(bgImage);

생성된 img태그를 html에 추가했다.