📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.
배경 이미지가 새로고침 될 때마다 Math(모듈)을 이용하여 랜덤으로 배경 이미지가 변화하는 기능을 구현해보자.
랜덤 숫자를 임의적으로 만들어내는 명령어.
1~5까지의 랜덤 숫자를 임의적으로 만들어내려면
<Math.random( )> * 5
소수점을 제외한 임의적 랜덤 숫자를 얻고 싶다면 ( 내림 )
<Math.floor( )>
Math.floor(3.9) : (3.2, 3.1, 3.9 전부 나머지를 버리고(내림 함수를 써서) 3이 되게 만든다는 뜻이다.)
소수점을 제외한 임의적 랜덤 숫자를 얻고 싶다면 ( 올림 )
<Math.ceil( )>
Math.ceil(3.9) : (3.2, 3.1, 3.9 전부 나머지를 버리고(올림 함수를 써서) 4가 되게 만든다는 뜻이다.)
Step 1. 원하는 이미지(갯수 안에서)를 랜덤으로 설정해보자.
const body = document.querySelector("body”);
// 이미지 갯수 설정
const IMG_NUMBER = 7;
// 랜덤 숫자 생성 함수
function genRandom() {
const number = Math.floor(Math.random() * 7);
return number;
}
// 최종 실행 함수
function init() {
const randomNumber = ;
}
init();
더 간결한 코드로 작성할 수도 있다.
const body = document.querySelector("body”);
const IMG_NUMBER = 7;
function genRandom() {
const number = Math.floor(Math.random() *IMG_NUMBER);
return number;
}
function init() {
// 랜덤 숫자 생성 함수를 변수로 선언하기
const randomNumber = genRandom();
}
init();
Step 2. 이미지를 가져오기.
const body = document.querySelector("body”);
const IMG_NUMBER = 7;
/* 이미지를 가져오는 함수 */
function paintImage(imgNumber) {
/* 1. new 를 사용하여 object 만들기 */
const image = new Image();
/* 2. object에 이미지 주소(레퍼런스) 연결하기 */
image.src = `images/${imgNumber + 1}.jpg`;
// + 1를 하는 이유는 Math.random() 함수가 0을 줄 수 있기 때문이다.
/* body 안에 image 넣기 */
body.prepend(image);
}
function genRandom() {
const number = Math.floor(Math.random() *IMG_NUMBER);
return number;
}
function init() {
const randomNumber = genRandom();
/* 이미지(갯수) 함수와 randeomNumber변수(랜덤숫자생성함수)를 인자로 설정 */
paintImage(randomNumber);
}
init();
Step 3. Style 작업 진행하기
const body = document.querySelector("body”);
const IMG_NUMBER = 7;
/* 이미지를 가져오는 함수 */
function paintImage(imgNumber) {
const image = new Image();
image.src = `images/${imgNumber + 1}.jpg`;
// image에 class 지정하기 (css에서 작업하기 위한 용도)
image.classList.add('bgImage');
body.prepend(image);
}
/* 배경이미지 애니메이션 style 설정 */
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn .5s linear;
}
혹시 이미지를 중앙정렬 할 수 있는 방법이 있을까요.. 아니면 백그라운드이미지로.. 할 수 있는 방법이..