배경화면

배경화면을 3개 고르고 새로고침할때마다 3개중 1개가 랜덤으로 선택되어 나타나게 된다. 그래서 unplash 라는 웹사이트에서 마음에 드는 배경 3개를 다운받도록한다. 사이즈는 1920 x 1920 언저리로 하는게 가장 이상적일것이다. 안그럼 그림이 늘어나서 해상도가 떨어지는 경우가 생길 수 있다. 그리고 bg.js 를 만들고 index.html 에 <script src="bg.js"></script> 를 추가하자.

bg.js 의 코드는 아래와 같다.

const body = document.querySelector("body");
// 배경이 위치할 곳은 body 태그이다. 그러므로 body태그를 지정해주자.

const IMG_NUMBER = 3;

function paintImage(imgNumber) {
  const image = new Image(); // 이미지를 삽입하는 함수이다
  image.src = `img/${imgNumber + 1}.jpg`; // img폴더안에 있는 파일을 지정한다. imgNumber뒤에 1을 더한 이유는 아래 기술했다.
  image.classList.add("bgImage"); // bgImage 클래스를 img 에 추가하여 세부조정 할 수 있게 한다.
  body.appendChild(image);
}
//imgNumber뒤에 1을 더한 이유:
//Math.floor(Math.random() * 3) 가 0,1,2 만 뽑아내기 때문에 1을 더해서 1,2,3 이 되게 하는 것이다(img 파일안에는 1.jpg, 2.jpg, 3.jpg 밖에 없다)

function genRandom() {
  const number = Math.floor(Math.random() * IMG_NUMBER);
  return number;
}
// Math.random() * 숫자 --> 숫자를 넘어서지 않은 수를 무작위로 뽑아내는 함수이다.
// Math.floor() -- 괄호안에 있는 숫자의 소수점을 없애고 무조건 내림한다. 참고로, 반대되는 함수는 math.ceiling() 이다.
// Math.floor(Math.random() * 숫자) -- 숫자 아래에 있는 수를 무작위로 뽑아내고 그 수가 소수라면 내림한 수를 프린트한다.

function init() {
  const random = genRandom();
  paintImage(random);
}

init();

css 로 배경화면 예쁘게 다듬기

배경화면의 크기를 조정하고, 배경화면이 은은하게 로딩되도록 효과를 부여한다.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} /* keyframes 는 효과를 지정한다. 형태는 함수처럼 이름을 지정해준다. 
opacity 는 불투명함을 나타내는 뜻. 0~1로 불투명함이 증가하면서 나타나는 효과 */

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: -1; /*이미지가 나타나는 layer의 위치를 정할 수 있다 -1이면 이미지가 글자뒤로 후퇴한다는 뜻.*/
  animation: fadeIn 0.5s linear;
}
/*아까 bg.js에서 image.classList.add("bgImage") 이미지에다 클래스를 추가한것도 여기 css에서 이미지만 선택적으로 미세조정 하려고 하기 위함*/