명언 사이트
HTML
<body>
<div class="wrap">
<div class="main">
<div class="quote"></div>
<div class="author"></div>
</div>
</div>
</body>CSS
<style>
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 950px;
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: 30px;
font-family: "NexonLv1Gothic";
color: red;
}
.author {
padding-top: 30px;
}
</style>CSS 설명
@import 구문을 사용하여 폰트를 가져와서 font-family 속성에서 사용하고 있습니다. 이 폰트는 외부에서 가져온 것으로 추측됩니다.
.wrap 클래스는 배경 이미지의 크기를 전체화면으로 늘리는 역할을 하고 있습니다.
.main 클래스는 내부의 요소들을 중앙에 위치시키기 위해 display, justify-content, align-items 속성을 사용하고 있습니다. 이 클래스는 또한 글씨체, 크기, 색상 등을 지정하는 역할도 합니다.
.author 클래스는 padding-top 속성을 사용하여 .main 클래스와 일정한 간격을 두고 있는 것으로 보입니다.
이 코드는 해당 웹페이지에서 .wrap, .main, .author 클래스가 사용되며, font-family, color, background-size와 같은 속성들을 사용하여 스타일링을 하고 있습니다.
JAVASCRIPT
<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, 5000);
setInterval(randomImg, 5000);
</script>JAVASCRIPT 설명
const quotesURL 변수는 API 엔드포인트의 URL을 저장하고 있습니다.
randomQuote() 함수는 fetch() 함수를 사용하여 API에서 랜덤한 명언을 가져오는 역할을 합니다. then() 메서드를 사용하여 API에서 받아온 데이터를 JSON 형식으로 변환하고, 랜덤한 명언과 그에 대한 작가를 HTML에 출력합니다. 만약 오류가 발생하면 catch() 메서드를 사용하여 콘솔에 에러 메시지를 출력합니다.
randomImg() 함수는 배경 이미지를 랜덤으로 변경하는 역할을 합니다. querySelector() 메서드를 사용하여 배경 이미지를 적용할 요소를 찾은 후, style.backgroundImage 속성을 사용하여 새로운 배경 이미지 URL을 설정합니다. 이 때, new Date().getTime() 함수를 사용하여 매번 새로운 URL을 가져올 수 있도록 하고 있습니다.
setInterval() 함수를 사용하여 일정한 시간마다 randomQuote() 함수와 randomImg() 함수를 호출하여 명언과 배경 이미지가 랜덤으로 변경되도록 구현하고 있습니다.
이 코드는 랜덤한 명언과 배경 이미지를 출력하는 동적인 웹페이지를 구현하는 예시입니다.