커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
사진 사이즈에맞게 홈화면에 사진 원본 그대로 띄우려면 어떻게 해야 하나요?
undefined주차
주*
댓글
3
・
추천
0
・
조회수
16
조회수
16
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
사진 사이즈에맞게 홈화면에 사진 원본 그대로 띄우려면 어떻게 해야 하나요?
띄워진 화면 말고도 사진은 왼쪽하단 사람 다리까지 나와야 원본인데 어떻게 하면 사진 그대로를 계속해서 사진 마다 정확하게 원본그대로를 짤리지 않고 띄울수 있을까요?
보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
띄워진 화면 말고도 사진은 왼쪽하단 사람 다리까지 나와야 원본인데 어떻게 하면 사진 그대로를 계속해서 사진 마다 정확하게 원본그대로를 짤리지 않고 띄울수 있을까요?
js 파일
$(document).ready(function () {
renderCurrentTime();
renderQuote();
renderRandomImage();
});
//현재 시간
function renderCurrentTime() {
let url = `https://worldtimeapi.org/api/timezone/Asia/Seoul`;
fetch(url)
.then((res) => res.json())
.then((data) => {
let datetime = data["datetime"].substr(11, 5);
// let datetime = data['datetime']
// console.log(datetime)
$("#currentTime").text(datetime);
});
}
// 명언
function renderQuote() {
let url = `https://api.quotable.io/random`;
fetch(url)
.then((res) => res.json())
.then((data) => {
let content = `" ${data["content"]} "`;
let author = `- ${data["author"]} -`;
$("#quoteContent").text(content);
$("#quoteAuthor").text(author);
});
}
// 랜덤 사진 꾸미기
function renderRandomImage() {
let imageList = [];
// 이미지 개수를 변경하려면 i=14의 값을 이미지 개수만큼 바꿔주세요!
for (i = 0; i < 14; i++) {
imageList.push(i);
}
let imageListLength = imageList.length;
let randomImage = Math.floor(Math.random() * (imageListLength))+1
randomImage = `images/${randomImage}.jpg`
$(document.body).css("background-image", `url(${randomImage})`);
}
html 파일
<!DOCTYPE html>
<html lang="en">
<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">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>나만의 동기부여 홈화면 만들기</title>
<script src="index.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
body {
background-image: url("https://images.unsplash.com/photo-1666065988253-3ad95ca4404f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
background-position: center;
color: white;
}
.time{
font-size: 80px;
font-weight: bold;
}
.greeting{
font-size: 50px;
}
.todo{
font-size: 30px;
}
.author{
font-size: 25px;
font-style: italic;
}
.main{
width: 100vw;
height: 80vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.quote{
width: 100vw;
height: 20vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
</style>
<script>
</script>
</head>
<body>
<div class="main">
<div id ="currentTime" class="time">12:00</div>
<div class="greeting">Hello, Juhyeong</div>
<div class="todo">코딩 발전 하기!</div>
</div>
<div class="quote">
<div id="quoteAuthor" class="author">- 명언의 저자 -</div>
<div id="quoteContent" class="content">" 명언의 내용 "</div>
</div>
</body>
</html>
댓글 알림
