Background 랜덤하게 웹화면에 보이기(createElement, appendchild in JavaScript)

랜덤하게 백그라운드 이미지가 표시되게 하기

=>랜덤하게 이미지 고르고 그 이미지를 body에 추가하는 작업

 

그동안은 html을 항상 먼저 작성하고 js을 사용해서 html에 넣어주는 작업만 함

즉 js에서 직접 html코드를 생성한 적은 없음 

 

그런데 이번에는 아래와 같은 html 태그를 

html에 직접 쓰지않고 js를 이용해  '랜덤하게 선정된 이미지를 보여주는' img 테그를 생성하고 싶음.

 

이를 위해 태그를 만들어주는 createElement 함수 이용

 

사용예시

createElement 함수를 이용해 img 태그를 생성할 수 있게 됨

 

생성된 태그에 js에서 직접 위와 같이 이미지도 추가할 수 있음.

콘솔에 js로 만든 html태그 아래와 출력해 확인해봄.

 

 

 

이제 bgImage를 body 내부에 추가하면 됨

appendChild() 이용

const images= ["0.jpg", "1.jpg", "2.jpg"];
 
const chosenImage = images[Math.floor(Math.random()*images.length)];
 
const bgImage = document.createElement("img");
bgImage.src= `img/${chosenImage}`;//생성된 img태그에 src추가해 <img src= img/0.jpg/>로 만듦
document.body.appendChild(bgImage);//이제 html body에 만든 img태그를 추가해줌 

img 태그 추가됨 확인

 

 

그런데 사진 크기가 화면에 안맞아서 스타일도 달아서 코드 수정해줌

const images= ["0.jpg", "1.jpg", "2.jpg"];
 
const chosenImage = images[Math.floor(Math.random()*images.length)];
 
const bgImage = document.createElement("img");
bgImage.src= `img/${chosenImage}`;//생성된 img태그에 src추가해 <img src= img/0.jpg/>로 만듦
bgImage.style="max-width: 100%; height: auto;";  //크기 화면에 맞게 조절
document.body.appendChild(bgImage);//이제 html body에 만든 img태그를 추가해줌 
 

 

요렇게 웹페이지가 만들어지게 되었담