Moment 앱 따라하기
배경화면으로 쓰일 이미지를 랜덤으로 출력 위해 Math 내장객체에서 floor(), random() 메소드를 활용한다.
html 파일에서 body 요소를 가져온다.
- 웹브라우저 화면 전체를 이미지로 씌울 예정이므로 body를 통째로 가져온다.
const body = document.querySelector("body");
1부터 시작하는 정수를 랜덤하게 뽑는 함수를 만든다.
- Math.random()은 1이하의 실수를 랜덤으로 반환한다.
- Math.floor()는 실수를 소수점 내림하여 정수 형태로 반환한다.
- 0부터 숫자가 반환되므로 더하기 1을 하여 숫자 1부터 변수로 지정되도록 한다.
// 가지고 있는 배경사진 갯수
const IMG_NUMBER = 3;
// Math.random()은 1 이하의 실수를 랜덤으로 출력한다 (0.XXXXXX 형태로)
// 3을 곱한다해도 숫자 3을 넘지 못하는 실수 형태의 숫자를 출력한다
// Math.floor()는 소수점 내림을 하여 실수 형태를 정수로 만든다
// 따라서 Math.floor(Math.random())는 "0"만 출력한다
// Math.floor(Math.random() * 3)은 "0, 1, 2"까지 출력 가능하다
// Math.ceil()은 소수점 올림을 한다
// IMG_NUMBER는 3 이므로
const number = Math.floor(Math.random() * IMG_NUMBER) + 1;
// 0, 1, 2 중에 하나를 반환한다
return number;
}
- 배경사진의 개수가 3개라서 IMG_NUMBER 변수에 3을 담았다.
- 이미지 개수에 맞게 임의로 하나의 숫자를 뽑아서 해당 숫자의 파일명을 가진 이미지를 가져올 것이다.
랜덤으로 뽑힌 숫자랑 같은 이름의 이미지 파일을 호출한다.
- 랜덤으로 뽑은 숫자를 함수의 인자로 사용한다.
- new Image() 메소드를 사용하여 html에 <img>를 만드는데, 이는 우리가 출력할 <img src="">가 담긴다.
- <img src="">는 images 폴더에 있는 이미지 파일을 지정한다.
- 그 이미지 파일은 랜덤으로 가져와야 하므로 imgNumber 파라미터를 통해 랜덤 숫자를 받는다
function paintImage(imgNumber) {
// <img> 태그를 만들어준다
const image = new Image();
// document.createElement('img')와 같은 코드를 나타낸다
// <img src=""> 이미지 파일의 소스를 입력한다
// 랜덤 숫자에 +1을 하는 이유는 이미지 파일이 1부터 시작하므로
image.src = `images/${imgNumber}.jpg`;
// <img src="" class=""> 이미지 효과를 위해 클래스를 추가한다
image.classList.add("bgImage");
// <body>에 완성된 <image>를 자식요소로 삽입하기
body.appendChild(image);
}
- 배경사진이 원본 그대로 노출되면 웹브라우저에 맞지 않으므로, CSS를 통해 약간의 수정을 한다.
- 완성된 image 변수를 body에 자식요소로 추가한다
배경사진의 크기를 조절하고 동시에 애니메이션 효과를 준다.
- animation 속성을 사용하기 앞서 @keyframes를 작성한다.
- 투명도(opacity)를 0에서 1로 변화를 주어 자연스럽게 화면이 전환될 수 있게 한다.
- top, left 크기를 0로 하여 텍스트로 인해 비어있는 상단, 왼쪽 공간을 제거한다.
- 웹브라우저 화면 크기에 맞도록 width와 height 비율을 100%로 작성한다.
- 텍스트가 배경사진 앞에서 노출될 수 있도록 z-index 속성을 이용해 레이어 순서를 조절한다.
/* 애니메이션으로 쓸 효과(fadeIn)를 설정한다 */
/* 사진의 투명도를 조절하여 안보이다가 보이게 한다 */
@keyframes fadeIn {
from {
/* 투명도 설정 */
opacity: 0;
}
to {
opacity: 1;
}
}
.bgImage {
/* 절대적인 위치를 계산한다 */
position: absolute;
top: 0;
left: 0;
/* 웹브라우저에 맞게 사이즈를 조절한다 */
width: 100%;
height: 100%;
/* 쌓여있는 레이어 순서. -1을 입력하면 사진이 뒤로 밀리고 텍스트가 앞으로 온다 */
z-index: -1;
/* 0.5초 서서히 사진이 나타난다 */
animation: fadeIn 0.5s linear;
}
genRandom() 함수와 printImage() 함수를 순차적으로 실행시킨다.
- genRandom() 함수를 통해 랜덤으로 뽑은 숫자를 printImage() 함수의 인자로 사용한다
function init(){
// 랜덤으로 받은 숫자를 변수 지정
const randomNumber = genRandom();
// 받은 숫자를 이미지를 선택하는 함수에 전달한다
paintImage(randomNumber);
}
init();
'코딩 연습 > Javascript' 카테고리의 다른 글
| Array.filter() (0) | 2019.01.01 |
|---|---|
| JSON.parse(), forEach() (0) | 2018.12.31 |
| 조건부 삼항 연산자(conditional ternary operator) (0) | 2018.12.30 |
| 객체 안에 특정 함수를 속성으로 지정하기 (0) | 2018.12.07 |
| 함수를 변수에 지정하기 (0) | 2018.12.07 |
쵸잇