이 전에 했던 것과 유사하게 이번엔 사진을 배경으로 랜덤하게 넣는 방법에 대해 이야기해본다.
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);