[JavaScript] Random Background

이 전에 했던 것과 유사하게 이번엔 사진을 배경으로 랜덤하게 넣는 방법에 대해 이야기해본다.

imag 파일에 3장의 사진을 넣었다고 가정 해본다. background.js파일에

const images = [
	"0.jpeg",
    "1.jpeg",
    "2.jpeg"
]

처음 사진의 이름과 js 파일에 넣을 때 이름을 똑같이 해야 한다.

이미지를 랜덤하게 가져오는 방법은 이 전 글에서 명언을 가져왔던 것과 똑같다.

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

이제 할 일은 이미지들을 html에 실제로 추가하는 방법이다.
지금까지는 html에 있는 것을 querySelector로 추가했지만 이제는 반대이다.

background.js 파일에

const bgImage = document.createElement("img");
bgImage.src = ìmg/${chosenImage}`;

<img src="img/0.jpeg">

위와 같은 결과값이 나온다. 이건 html에

<img src="img/0.jpeg">

이렇게 작성하는 것과 똑같은데 html에 입력한 것이 아니라 js를 통해 html에 작성되게 한 것이다.
그러나 이건 아직 document에 존재하지 않고, js에만 존재한다. 그렇기 때문에 bgImage를 body 내부에 추가해야 한다.

document.body.appendChild(bgImage);