728x90
오늘은 전에 명언이 10초에 한번씩 바뀌는 것에서 추가로 뒷 배경 이미지도 10초에 한번씩 바뀌는 것으로 만들어 보았습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quotes</title>
<link rel="stylesheet" href="css/homework5.css">
</head>
<body>
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
</body>
</html>HTML은 전과 동일합니다.
css
@import url('https://webfontworld.github.io/gonggames/EsaManru.css');
@import url('https://webfontworld.github.io/sebang/SebangGothic.css');
body {
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100vh;
box-sizing: cover;
overflow: hidden;
background-position: center;
}
body::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
#result {
background-color: rgba(98, 98, 98, 0.632);
color: #fafdff;
padding: 20px;
border-radius: 10px;
}
.quote {
font-family: "EsaManru";
font-size: 2.3rem;
margin-bottom: 20px;
text-align: center;
}
.author {
font-size: 1.5rem;
margin-left: 1rem;
font-style: italic;
font-family: "SebangGothic";
text-align: center;
}body에 들어간 이미지만 조금 수정해주었습니다.
script
<script>
const Quote = () => {
fetch(`https://dummyjson.com/quotes`)
.then(response => response.json())
.then(data => {
const result = document.querySelector("#result");
const random = Math.floor(Math.random() * 30); // 0 ~ 29 사이의 수
result.querySelector(".quote").innerHTML = data.quotes[random].quote;
result.querySelector(".author").innerHTML = ` - ${data.quotes[random].author}`;
})
.catch(error => console.log(error));
}
const changeBackgroundImage = () => {
const backgroundImageUrl = `https://source.unsplash.com/random/?sky&t=${new Date().getTime()}`;
document.body.style.backgroundImage = `url(${backgroundImageUrl})`;
}
Quote();
changeBackgroundImage();
setInterval(Quote, 10000);
setInterval(changeBackgroundImage, 10000);
</script>
추가된 script
const changeBackgroundImage = () => {
const backgroundImageUrl = `https://source.unsplash.com/random/?sky&t${new Date().getTime()}`;
document.body.style.backgroundImage = `url(${backgroundImageUrl})`;
}
setInterval(changeBackgroundImage, 10000);https://source.unsplash.com/random/은 Unsplash에서 무작위 이미지를 가져오고
?sky는 검색어를 지정하는 것으로, "sky"라는 검색어에 해당하는 이미지를 가져오게 됩니다.
&t=${new Date().getTime()}는 브라우저 캐시를 방지하기 위해 새로운 URL을 생성하는 데 사용됩니다.
document.body.style.backgroundImage는 CSS 속성으로, 해당 URL에서 이미지를 가져와서 문서의 배경 이미지로 설정합니다.
setInterval을 사용해 10초에 한번씩 이미지가 바뀌도록 합니다.