[TIL] Image Background
✏️ 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 에 이미지 종속 }
Author And Source
이 문제에 관하여([TIL] Image Background), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yunji0614/TIL-Image-Background저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)