728x90
반응형
마무리 문제풀이 (명언 랜덤) 에서 배경이미지를 추가하여 같이 10초마다 바뀌게 만들었습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<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>명언 모음</title>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="quote"></div>
<div class="author"></div>
</div>
</div>
</body>
</html>배경이미지를 넣기 위해 wrap클래스명을 가진 div로 main 영역을 감쌌습니다.
CSS
<style>
@import url('https://webfontworld.github.io/Montserrat/Montserrat.css');
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 700px;
background-size: cover;
z-index: 1;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
text-align: center;
font-size: 25px;
font-family: "Montserrat";
color: #fff8ab;
}
.author {
padding-top: 30px;
text-decoration: underline;
text-underline-offset: 10px;
}
</style>
SCRIPT
<script>
// const quotesURL = "http://dummyjson.com/quotes";
function randomQuote(){
fetch('https://dummyjson.com/quotes')
.then(response => response.json())
.then(data => {
let randomNumber = Math.floor(Math.random() * data.quotes.length);
let divQuote = document.querySelector(".quote");
let divAuthor = document.querySelector(".author");
divQuote.innerHTML = data.quotes[randomNumber].quote;
divAuthor.innerHTML = data.quotes[randomNumber].author;
})
.catch((err) => console.log(err));
}
randomQuote();
function randomImg(){
let wrapImg = document.querySelector(".wrap");
const bgimgURL = `https://source.unsplash.com/random/?nature&t=${new Date().getTime()}`;
wrapImg.style.backgroundImage = `url(${bgimgURL})`;
}
randomImg();
setInterval(randomQuote, 10000);
setInterval(randomImg, 10000);
</script>추가한 script
function randomImg(){
let wrapImg = document.querySelector(".wrap");
const bgimgURL = `https://source.unsplash.com/random/?nature&t=${new Date().getTime()}`;
wrapImg.style.backgroundImage = `url(${bgimgURL})`;
}
randomImg();
setInterval(randomImg, 10000);함수 randomImg를 만들어 실행시켜줍니다.
let wrapImg = document.querySelector(".wrap");
함수 안에 이미지를 넣을 영역을 선택자로 만들어줍니다.
변수를 선언하여 이미지를 랜덤으로 가져올 수 있는 unsplash API 사이트를 변수에 저장합니다.
new Date().getTime() 함수를 호출하여 현재 시간을 가져와 URL에 추가합니다. 이렇게 하면 매번 새로운 URL을 생성할 수 있으므로, 브라우저에서 이미지 캐시를 우회하여 항상 새로운 이미지를 보여줄 수 있습니다.
wrapImg.style.backgroundImage = `url(${bgimgURL})`; 를 사용하여 wrapImg 영역에 배경이미지를 넣어줍니다.
randomImg();를 입력해 함수를 실행시켜줍니다.
setInterval(randomImg, 10000);를 입력해 10초마다 바뀌게 해줍니다.