728x90
반응형
CSS
<style>
* {
margin: 0;
padding: 0;
font-style: "NexonLv1Gothic";
}
.bgImg {
width: 80%;
height: 100vh;
display: flex;
}
.section {
position: absolute;
left: 50%;
top: 60%;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 1px;
z-index: 1000;
padding: 20px 50px;
background-color: rgba(255, 255, 255, 255);
}
.quote {
font-size: 30px;
margin-bottom: 25px;
}
.author {
font-size: 20px;
color: rgba(87, 87, 87, 0.7);
}
</style>명언과 명언을 말한 사람이 나오는 박스, 배경에 대한 CSS 입니다.
사진이 더 잘 보일 수 있도록 명언을 오른쪽 아래에 배치했습니다.
HTML 구조
<body>
<div id="result">
<section class="section">
<div class="quote"></div>
<div class="author"></div>
</section>
<img class="bgImg" src="https://source.unsplash.com/random/?cat" alt="배경">
</div>코드의 특징은 unsplash라는 홈페이지의 api를 이용하는 부분입니다. 랜덤한 이미지를 unsplash에서 가져와 사용합니다!
그래서 지난 포스팅과는 다르게 이미지에 대한 구조 부분을 추가해주었습니다.
그래서 명언이 나오는 부분과 명언, 명언을 말한사람, 그리고 이미지 부분으로 구성되게 됩니다.
Script
<script>
function imgLoad(){
let bgImg = document.querySelector(".bgImg");
bgImg.src = `https://source.unsplash.com/random/?cat=${new Date().getTime()}`;
}
imgLoad();
function nextQuote(){
fetch("json/quotes.json")
.then(res => res.json())
.then(items => {
// console.log(items); // 문제의 데이터 불러오기
const random = Math.floor(Math.random()*30); // 1~29까지의 수 구하기
// console.log(random);
const quote = result.querySelector(".quote");
const author = result.querySelector(".author");
quote.innerHTML = items.quotes[random].quote;
author.innerHTML = `-${items.quotes[random].author}`;
})
.catch((err) => console.log(err));
};
nextQuote();
setInterval(imgLoad, 5000);
setInterval(nextQuote, 5000);
</script>
</body>
</html>스크립트 부분입니다!
지난 번과 크게 달라진 부분은 없으나 이미지를 가져오기 위한 변수가 추가 되었습니다.
function imgLoad(){
let bgImg = document.querySelector(".bgImg");
bgImg.src = `https://source.unsplash.com/random/?cat=${new Date().getTime()}`;
}
imgLoad();이미지를 가져오는 변수의 이름을 imgLoad라고 해주고, 함수를 실행합니다.
Unsplash에서 무작위로 선택된 고양이 이미지를 가져오기 위한 부분입니다.
new Date().getTime() 함수는 현재 시간을 밀리초 단위로 설정하고, 이 값을 cat 매개변수와 함께 URL에 추가하면,
Unsplash는 매번 다른 이미지를 반환합니다.
이렇게 생성된 URL은 bgImg 클래스를 가진 이미지 태그의 src 속성에 할당되어 해당 이미지를 불러옵니다.