“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
자바스크립트-마무리문제
자바스크립트 마무리 문제 중에 명언들이 10초마다 바뀌는데 이미지도 10초동안 함께 바뀔 수 있도로 꾸며 보았습니다!
<10초동안 명언을 바꿔본 문제!>
https://younajeong.tistory.com/72
스쳐가는 명언들 속에 내 명언을 찾아보자
자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일
younajeong.tistory.com
이번에 역시 저번에 했던 형식과 비슷하게 코딩을 해 줄 예정입니다.
HTML&CSS
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
}
#result img {
width: 100%;
height: 100vh;
object-fit: cover;
}
#text {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
align-items: center;
font-size: 30px;
color: #000;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
background-color: #f8eded58;
box-shadow: 0 0 2px inset;
}
</style>
</head>
<body>
<div id="result">
<img id="image" src="" alt="랜덤이미지">
<div id="text">
<div class="quote"></div>
<div class="author"></div>
</div>
</div>
</body>HTML&CSS
저번 형식과 똑같은 형식으로 result안에 img 태그를 추가하고 id에 image를 부여해줍니다. 10초동아 바뀌는 이미지 링크를 걸어두고 이미지가 먼저 바뀌는지 확인 할 수 있습니다. 여기에 처음에는 주소를 걸어두지만 자바스크립트를 사용해서 나올 수 있도록 하기 위해서 주소는 스크립트를 사용한 후에 지워줍니다.
<사용한 주소>
https://source.unsplash.com/random/?programming
프로그래밍쪽을 원하는 이미지 주제로 바꾸면 원하는 이미지로 사용할 수 있습니다.
CSS에 전체 body에 width값과 height값을 준 후 image에도 필요한 속성을 넣어줍니다.object-fit은 요소의 크기에 맞게끔 이미지를 조절해 주는 건데 cover를 사용하면 비율은 고정되지만 가로와 세로값이 고정이 되며 개체의 크기에 맞게끔 자라지고 확대가 되어서 나타나는 속성 중 하나입니다. 그리고 text는 box안에 들어갈 수 있도록 box-sizing을 통해서 box를 만들어서 안에 배경을 투명하게 해 준 후 box-shadow로 박스 밖 선을 넣어 주었습니다.
Javascript
<script>
//선택자
const Result = document.querySelector("#result")
const Img = document.querySelector("#image")
const Quote = Result.querySelector(".quote")
const Author = Result.querySelector(".author")
const dataresult = (value) => {
fetch("./dummy01.json")
.then(response => response.json())
.then(items => {
const rendomIndex = Math.floor(Math.random() * items.length);
Quote.textContent = items[rendomIndex].quote;
Author.textContent = items[rendomIndex].author;
fetch('https://source.unsplash.com/random/?flower')
.then((response) => {
Img.src = response.url;
})
.catch((err) => console.log(err));
})
.catch((err) => console.log(err));
};
dataresult();
setInterval(dataresult, 10000);
</script>Javascript
- 저번에 사용한 코드 그대로 남겨둡니다.
- 선택자에 image를 querySelector를 사용해서 선택자를 만들어 줍니다.
- 랜덤으로 선택한 text 밑에 fetch를 한번 더 사용해서 이미지 URL을 가져와서 Img요소의 src속성을 변경시켜줍니다.
- 마지막으로 datarsult함수를 최초에 한 번 호출하고, 10초마다 setInterval을 사용해서 주기적으로 호출해 줍니다.
- 이 코드는 비동기적으로 데이터를 가져오기 때문에 fetch요청이 완료 될 때까지 코드의 실행이 멈추지 않는 특징을 가지고 있습니다.
- feach요청이 실패할 경우를 대비해 catch구문을 사용하여 에러를 처리할 수 있도록 합니다.
<완성된 이미지>