✏️ TIL

이미지 여러 장을 페이지가 새로 뜰 때마다 랜덤하게 배경으로 지정하기

📚 Algorithm

0. Before JS

0-1. 사진 이름을 변경한다 (이미지 갯수만큼 숫자로 변경
0-2. HTML에 아래 script 코드를 추가한다

1. body 객체를 불러오기

2. 랜덤 숫자를 생성하는 함수를 생성

    function genRandom(){
    const number = Math.floor(Math.random * 원하는 이미지 양);
    return number;
    }

💡 Math.ceil - 소숫점 올림 / Math.floor - 소숫점 내림
Math.floor(Math.random() * 원하는 이미지 양);

3. init 함수를 생성

3-1. 랜덤넘버 생성 함수의 결과를 이미지 출력 함수에 삽입

function init(){
const randomNumber = genRandom();
// 랜덤넘버 생성함수 상수화
paintImage(randomNumber)
}

4. paintImage 함수 생성

4-1. html에 이미지 객체 생성
4-2. 이미지 주소 입력
4-3. body에 image를 종속시켜주기
4-4. 이미지 객체에 클래스 추가하기

• css를 만져서 이미지를 background에 깔아주고, fade in 등의 효과 주기

function paintImage(imgNumber){
const image = new Image();
  // 4-1 이미지 객체 생성
image.src = `images/${imgNumber + 1}.jpg`;
  // 4-2 이미지 파일 경로
image.classList.add('bgImage');
  // 4-4 이미지 객체에 클래스 추가
body.appendChild(image)
  // 4-3 body 에 이미지 종속
}