기존 강의에서는 background를 img 파일에 적용했고, 그에 따라 배경으로 적용하기 위해선 CSS의 변경이 많을 수 밖에 없었다.
background는 background로 적용시키는 것이 적절하다고 생각했고, 변경했다. 그 과정도 포스팅해보고 기존 강의에서 사용한 코드들도 전부 복습해보려 한다.
Math
Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. 함수 객체 아님.
Number 자료형만 지원하고 BigInt와는 사용할 수 없다.
다른 전역 객체와 달리 Math는 생성자가 아니다. Math의 모든 속성과 메서드는 정적이다.
우리는 여기에서 Math.floor()와 Math.random()을 사용해볼 것이다.
Math.floor()
Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다.
console.log(Math.floor(5.95));
// Expected output: 5
console.log(Math.floor(5.05));
// Expected output: 5
console.log(Math.floor(5));
// Expected output: 5
console.log(Math.floor(-5.05));
// Expected output: -6
이것을 왜 쓰냐? Math.random()의 수를 정리하기 위해서다.
Math.random()
Math.random()함수는 0이상 1미만의 구간에서 근사적으로 균일한 부동소숫점을 반환하며 이 값은 사용자가 원하는 범위로 변형할 수 있다.
👀 참고 : Math.random()은 암호학적으로 안전한 난수를 제공하지 않으므로, 보안과 관련된 어떤 것에도 이 함수를 사용해선 안된다. 그 대신 Web Crypto API의 window.crypto.getRandomValues() 메소드를 이용해야 한다.
Math.random();console.log()로 찍어보자.
소숫점이 너무 길기 때문에 위에서 말한 floor()든, round()든 적절한 함수를 써주어야 한다.
console.log(Math.floor(Math.random()*10));
100을 곱해주면 1~100 내에서 랜덤하게 수가 선택될 것이다.
background-image의 갯수만큼 곱해주면 된다.
img 파일명을 배열로 만들어주고, 배열의 length를 선택해보자.
const images = [
"01.jpeg",
"02.jpeg",
"03.jpeg",
"04.jpeg",
"05.jpeg",
"06.jpeg",
];
const chosenImage = images[Math.floor(Math.random() * images.length)];
reload될 때마다 random이 적용될 것이다!
실제 background-image로 적용하기 위해서 세팅을 해보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style2.css" />
<title>Document</title>
</head>
<body>
<div class="wrap"></div>
<script src="./js/background2.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
}
.wrap {
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}
배경이미지가 랜덤으로 적용되는가만 확인할 수 있게 html이랑 css를 적용해주고, console로 랜덤이 제대로 적용되는지만 우선 확인해본다!
reload하니 계속 바뀌는 걸 확인! 이제 background image를 div에 직접 경로 추가를 해주자.
const images = [
"01.jpeg",
"02.jpeg",
"03.jpeg",
"04.jpeg",
"05.jpeg",
"06.jpeg",
];
const bg = document.querySelector(".wrap");
const chosenImage = images[Math.floor(Math.random() * images.length)];
bgImage = `img/${chosenImage}`;
console.log를 사용해 bgImage를 확인해보자.
경로 설정은 완료되었고 bg로 선택해놓은 .wrap에 속성을 추가하고, 경로를 넣어주자.
어떻게 하느냐! console.dir()로 element의 내부를 보자.
bg => style => backgroundImage가 보인다.
const images = [
"01.jpeg",
"02.jpeg",
"03.jpeg",
"04.jpeg",
"05.jpeg",
"06.jpeg",
];
const bg = document.querySelector(".wrap");
const chosenImage = images[Math.floor(Math.random() * images.length)];
bg.style.backgroundImage = `url(img/${chosenImage})`;
짧고 간단하게 완성!!!! 작동도 잘한다.
기존 강의 코드는
const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);이것이었다. 스스로 잘 개선한 것 같아 맘에 든다!
'JavaScript' 카테고리의 다른 글
| 구조 분해 할당 Destructuring assignment으로 가독성 높이기 (1) | 2023.08.31 |
|---|---|
| `innerText`와 `innerHTML`의 차이점을 알아보자! (2) | 2023.08.29 |
| Date() 생성자와 내장 메서드로 시계 깔끔하게 적용하기 (2) | 2023.08.29 |
| Submit시 Event.preventDefault()로 새로고침 Reload 방지하기 (3) | 2023.08.29 |
| 로컬 스토리지 localStorage 와 세션 스토리지 sessionStorage (0) | 2023.08.28 |