#6.0~6.2

김모씨·2023년 6월 14일
1

Quotes and background

Quotes

const quotes = [
{
quote: "It does not matter how slowly you go as long as you do not stop.",
author: "Confucius",
},
{
quote: "To enhoy the rain bow, first enjoy the rain.",
author: "-Paulo Coelho-",
},
{
quote: "When it rains look for rainbows, when it's dark look for stars.",
author: "-Oscar Wilde-",
},
{
quote: "Life is unfair, get used to it.",
author: "-Bill Gates-",
},
{
quote: "Despite the forecast, live like it's spring.",
author: "-Lilly Pulitzer-",
},
{
quote: "The way to get started is to quit talking and begin doing.",
author: "-Walt Disney-",
},
{
quote:
"If you don't get out of the box you've been raised in, you won't understand how nuch bigger the world is.",
author: "-Angelina Jolie-",
},
{
quote: "Keep your eyes on the stars and your feet on the ground.",
author: "-Theodore Roosevelt-",
},
{
quote:
"Money is like gasoline during a road trip. You don't wnant to run out of gas on your trip, but you're not doing a tour of gas starions.",
author: "-Tim O'Reilly",
},
{
quote:
"The only place where success comes before work is in the dictionary.",
author: "-Vidal Sassoon-",
},
];

Background

// 동적으로 배경화면 넣기
const chosenImage = `img/${images[Math.floor(Math.random() * images.length)]}`;

function paintBackgroundImg(){
const backgroundImages = document.createElement("img");
backgroundImages.src = `${chosenImage}`;
document.body.style.backgroundImage = `url('${chosenImage}')`;
}

paintBackgroundImg();

--------------------------------------

const chosenImage = `img/${images[Math.floor(Math.random() * images.length)]}`;

function paintBackgroundImg(){
const backgroundImages = document.createElement("img");
const backgroundImagesSetting = document.querySelector("body");
backgroundImages.src = `${chosenImage}`;
backgroundImages.classList.add("bgImages");
backgroundImagesSetting.appendChild(backgroundImages);
}

paintBackgroundImg();

in style.css file
.bgImages{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

Recap

const images = [
"01.jpg",
"02.jpg",
"03.jpg",
"04.jpg"
];

const chosenImage = images[Math.floor(Math.random() * images.length)];

document.body.style.backgroundImage = `url('img/${chosenImage}')`
// body background 작성, 백그라운드 이미지
profile
아주대학교 디지털미디어학과 & 소프트웨어학과(재학 중)

0개의 댓글