Image Background
4. 이미지 백그라운드 넣기 : Unsplash API에서 랜덤으로 이미지를 불러와서 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Something</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="js-clock">
<h1 class="js-title">00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList">
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
<script src="bg.js"></script>
</body>
</html>body {
background-color: #2c3e50;
color: #34495e;
}
.btn {
cursor: pointer;
}
.clicked {
color: #7f8c8d;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn 0.5s linear;
}const body = document.querySelector("body");
const IMG_NUMBER = 6;
function paintImage(imgNumber){
const image = new Image();
image.src = `images/${imgNumber + 1}.jpg`;
image.classList.add("bgImage");
body.prepend(image);
}
function genRandom(){
const number = Math.floor(Math.random() * IMG_NUMBER);
return number;
}
function init(){
const randomNumber = genRandom();
paintImage(randomNumber);
}
init();math : 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체
math.ceil : 소수점을 올림
math.floor : 소수점을 내림
Last updated
