website에 배경화면을 랜덤으로 띄우는 방법에 대한 설명임.
quotes편에서 기술한 내용과 거의 동일함.
내가 띄우고자하는 이미지들을 array시켜놓고 아래 코드대로 작성
const images = ["1.jpg", "2.jpg", "3.jpg"]
const chosenImage = images[Math.floor(Math.random() * images.length)]
먼저 javascript에서 이미지 태그를 만들고 이걸 html에 추가해야 함.
이때 사용하는것이 createElement()
const bgImage = document.createElement("img")html에 <img>라고 하는 element를 생성한건데 아직은 html 어디에도 있지 않음.
여튼 저런것도 가능하다면
bgImage.src = `img/${chosenImage}`이런것도 가능함.
마치 html에서 <img src = "img/0.jpg"/>를 입력하는 것과 같은 내용임.
다만, 아직 text로서의 역할밖에 못하지만 이제 hmtl body태그 내부에 넣는 방법은
document.body.appendChild(bgImage)appendChild()는 body 태그 가장 뒤에 html을 추가한다
반대로 prepend는 가장 위에 추가!
끗!
