[Javascript] Momentum 만들기 - 배경화면 기능 구현

배경화면 기능 구현을 진행하였다.

수행할 작업 내용은

1. 배경 이미지로 사용할 이미지를 불러와 배열에 저장한다.
2. 배열에 저장된 배경 이미지 중 랜덤하게 하나를 불러와서 화면에 표시한다.

 

이 두 가지 작업에 더해서 추가적으로 사용자가 원하는 이미지를 불러와서 배경화면으로 설정하는 기능을 추가로 구현해보고자 한다.

일단, 오늘 작업은 위 1, 2번 작업을 진행하는 것으로.

 

1. 배경 이미지로 사용할 이미지를 불러와 배열에 저장하기

1. Google에서 "Momentum background image"로 검색해서 3가지 이미지를 저장, images 폴더 내에 저장하였다.

 

images 폴더 내에 3개의 이미지를 저장

 

2. 코드 내에서 상수 형태로 이미지가 담긴 배열을 생성한다.

const IMAGES = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg']
const IMG_NUMBER = 3;

 

- 저장한 이미지를 인덱스를 통해 접근해서 배경화면으로 만들면 된다.

2. 배열에 저장된 배경 이미지 중 랜덤하게 하나를 불러와서 화면에 표시한다.

1. Math.random()을 통해 난수를 발생시키는 함수 getRandom()을 작성한다.

 

const getRandom = () => {
    return Math.floor(Math.random() * IMG_NUMBER)
}

 

- Math.random() * IMG_NUMBER를 통해 0 ~ 3까지의 실수형 난수를 발생시킨다.

- 인덱스로 접근하기 위해 정수형이 필요하므로 Math.floor로 발생한 난수를 감싸준다.

 

2. 발생시킨 난수를 통해 이미지를 읽어들여 배경화면에 기록하는 함수 paintImage를 작성한다.

 

const paintImage = (imgNumber) => {
    const backgroundImage = new Image();
    backgroundImage.src = IMAGES[imgNumber];

    body.style.backgroundImage = backgroundImage;
}

 

- 비어있는 Image 객체를 생성하고, 해당 객체가 저장해둔 이미지를 불러올 수 있도록 작성하였다.

- 그리고 body의 style에 backgroundImage 옵션을 불러온 이미지로 설정하였다.

- 완성 ?!

실행 결과

애석하게도,, 변한 것은 없다.

 

- 콘솔 창에 정상적으로 이미지가 뜸에도 불구하고 배경화면이 설정되지 않는다.

- 왜인지 검색을 해본 결과 backgroundImage 속성은 url("원하는 이미지 경로")의 형태로 이미지를 불러와야 한다고 한다.

- 그렇기 때문에 코드를 아래와 같이 수정해서 실행해보았다.

 

const paintImage = (imgNumber) => {
    const backgroundImage = "url('" + IMAGES[imgNumber] + "')"
    //console.log(backgroundImage);
    body.style.backgroundImage = backgroundImage;
}

 

- 그 결과는

 

배경이미지가 설정되었다.

 

- 배경 이미지가 설정되었다.

- 하지만 아직 스타일 코드가 작성이 덜 되었기 때문에 예뻐보이지는 않는다.

- 우선, 이미지가 깨져서 불러와진다. 해당 배경 이미지의 원본은 아래와 같다.

 

놀랍게도 위 배경화면의 원본이다.

 

- 이처럼 예쁜 파도치는 절벽 사진이 확대되어 저렇게 별로 예쁘지 않게 나온다. 이 부분에 대한 개선이 필요하다.

- 그리고 기존에 존재하는 글씨체들에 대해서도 수정이 필요하다. 검은색으로 되어 있다 보니 배경 사진에 의해 잘 안 보인다.

---

일단, 오늘은 배경화면 불러오는 코드까지 작성을 완료하였으니, 다음 야간코딩 시간에 문제들을 해결할 것이다.

다음할 작업은 배경화면 전체를 불러오기 + 기존에 있는 아이템들이 잘 보이도록 css 코드 작성하기가 되겠다.