9. Quotes And Background (Background)

- HYML -

만든 js파일을 입력함.

 

 

 

- IMG -

원하는 사진을img 폴더에 넣어둠.

이때 사진 이름이 매우 중요함.

 

 

 

- JS -

const images = ["0.jpeg", "1.jpeg", "2.jpeg"]; 를 하여

images에 사진들을 배열하여 넣어줌.

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

chosenImage에 images를 랜덤으로 하나 나타내게 함.

images[Math.floor(Math.random() * images.length)]를 하여

images의 배열을

Math.random() * images.length 를 하여

images.length 만큼 랜덤으로 하나 뽑게 하고

Math.floor(Math.random() * images.length) 를 하여

Math.random() * images.length 의 값을 반내림 하게함.

const bgImage = document.createElement("img"); 를 하여

bgImage에 img라는 html element를 새로 만듬.

 

createElement() 는 html element를 만듬.

( html 파일에서 불러오는 것이 아니라 js파일에서 새로 만드는 것 )

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

bgImage의 src를 만듬.

주소는 img/와 chosenImage인 랜덤으로 뽑히는 img임.

document.body.appendChild(bgImage); 를 하여

bgImage를 body의 가장 밑에 추가함.'

 

append 는 가장 밑에 추가하는 것.

prepend 는 가장 위에 추가하는 것.

 

 

 

- 화면 -

새로고침을 할때마다 이미지가 랜덤으로 html 파일에 추가되는 것을 볼 수 있음.

 

랜덤으로 넣어주어야 하기 때문에 html에 img를 작성한 것이 아니라

js파일에 img를 만들어서 html에 나타나게 하는 것임.