1. background.js 만들기
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="login-form hidden" id="login-form">
<input
required
maxlength="15"
type="text"
placeholder="What is your name?" />
</form>
<h2 id="clock">00:00:00</h2>
<h1 class="hidden" id="greeting" ></h1>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
</body>
</html> 2. 이미지 준비하기
- img 폴더 만들고 내부에 이미지 넣기
3. image 랜덤으로 선택하기
const images = ["desk.jpeg", "sky.jpeg", "simple.png"];
const choseImage = images[Math.floor(Math.random() * images.length)];
console.log(choseImage);
4. 배경 이미지로 적용하기
const images = ["desk.jpeg", "sky.jpeg", "simple.png"];
const choseImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img"); // img 추가
bgImage.src = `img/${choseImage}`; // 이미지 경로 설정
console.log(bgImage);
5. body 내부에 추가하기
const images = ["desk.jpeg", "sky.jpeg", "simple.png"];
const choseImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img"); // img 추가
bgImage.src = `img/${choseImage}`; // 이미지 경로 설정
document.body.appendChild(bgImage); //body내부에 추가하기
Share article
