QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
10초에 한번씩 명언과 배경사진이 바뀌는 페이지 만들기
코드
<!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>
<link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/c.css"> -->
<style>
body {
background-image: url("https://source.unsplash.com/random/?sea");
font-family: 'GmarketSans';
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 30px;
color: #fff;
}
</style>
</head>
<body class="bg01 font11">
<div id="result">
<div class="quote"></div>
<div class="author"></div>
</div>
<script>
//함수 정의
function updateQuote() {
fetch("json/dummy01.json")
.then(res => res.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));
}
function updateBackground() {
const imageUrl = `https://source.unsplash.com/random/?sea&t=${new Date().getTime()}`;
document.body.style.backgroundImage = `url(${imageUrl})`;
}
// 10초마다 명언과 배경 이미지를 업데이트
updateQuote();
updateBackground();
setInterval(updateQuote, 10000);
setInterval(updateBackground, 10000);
</script>
</body>
</html>
body {
background-image: url("https://source.unsplash.com/random/?sea");
}
"https://source.unsplash.com/random/?sea" URL을 통해, 배경 이미지가 랜덤으로 해변 풍경이 선택됩니다.
//함수 정의
function updateQuote() {
fetch("json/dummy01.json")
.then(res => res.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));
}
- fetch() 메소드: 이 메소드는 JSON 파일을 가져오기 위해 사용됩니다. "json/dummy01.json" 경로에 있는 JSON 파일을 가져옵니다.
- .then() 메소드: 이 메소드는 JSON 데이터를 이용하여 무작위로 명언과 저자를 선택하고, 선택된 명언과 저자를 HTML 문서에 삽입하기 위해 사용됩니다.
- querySelector() 메소드: 이 메소드는 HTML 문서에서 지정한 CSS 선택자에 해당하는 요소를 찾아 반환합니다. 이 코드에서는 #result 요소와 .quote, .author 클래스를 가진 요소를 선택합니다.
- Math.floor() 함수: 이 함수는 주어진 숫자를 내림하여 정수를 반환합니다. 이 코드에서는 0부터 29까지의 무작위 숫자를 선택하기 위해 사용됩니다.
- innerHTML 속성: 이 속성은 HTML 요소의 내부 HTML 코드를 가져오거나 설정합니다. 이 코드에서는 선택된 명언과 저자를 HTML 문서에 삽입합니다.
function updateBackground() {
const imageUrl = `https://source.unsplash.com/random/?sea&t=${new Date().getTime()}`;
document.body.style.backgroundImage = `url(${imageUrl})`;
}
매번 호출될 때마다 Unsplash API를 통해 무작위로 바다 사진을 가져오는 URL을 생성합니다. URL 끝에 &t=${new Date().getTime()}를 추가하여 브라우저 캐시를 회피합니다. 그 다음, 해당 URL을 이용하여 문서의 배경 이미지를 변경합니다. 이렇게 함으로써, 페이지가 로드될 때마다 새로운 무작위 이미지가 표시되며, setInterval() 메소드를 이용하여 10초마다 이미지가 업데이트됩니다.
// 10초마다 명언과 배경 이미지를 업데이트
updateQuote();
updateBackground();
setInterval(updateQuote, 10000);
setInterval(updateBackground, 10000);
setInterval() 함수를 이용하여 매 10초마다 updateQuote() 함수와 updateBackground() 함수를 호출하도록 구성되어 있습니다. 처음에는 페이지 로딩 시 updateQuote()와 updateBackground() 함수를 호출하여 초기 명언과 배경 이미지를 설정합니다. 그 다음, setInterval() 함수를 사용하여 각 함수를 10초마다 호출하도록 설정하였기 때문에, 매 10초마다 새로운 명언과 배경 이미지가 표시됩니다. 이를 통해, 페이지가 계속해서 새로운 내용을 보여주게 됩니다.
반응형
