시작하는 중

[자바스크립트] JS를 통해 HTML에서 배경화면 지정하기 본문

자바스크립트/momentum

[자바스크립트] JS를 통해 HTML에서 배경화면 지정하기

싱욱 2022. 6. 5. 17:08
1
2
<body background="img/0.jpg" id="bgimg">
</body>
 cs

우선 HTML 본문 body부분에 background를 통해 배경화면을 지정하고 id를 지정하여 css와 js에서 접근하기 쉽게 만듬

 

1
2
3
4
5
6
7
8
9
const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg"];
 
const choseonImage = images[Math.floor(Math.random() * images.length)];
 
const bgImage = `img/${choseonImage}`;
 
const bg = document.querySelector("#bgimg");
 
bg.background = bgImage;
 cs

images 배열을 통해 4개의 이미지에 접근하기 쉽게 만들고

chosemImage에서 Math의 random함수와 반올림 함수를 통해 정수 0~3을 랜덤하게 뽑음

템플릿 리터럴을 통해 `경로 + ${랜덤한 정수로 뽑힌 파일의 이미지}`형식으로 변수를 만듬 -> img/0.jpg

querySelector를 통해 html에서 bgimg라는 id를 가진 body태그에 접근

bg.background를 통해 body태그의 background attribute에 접근하고 변경

 

이러면 이렇게 된다.

배경으로 설정은 됐는데 크기가 많이 다름

이럴 땐 css에서 접근하여 property를 바꾸면 된다.

1
2
3
4
#bgimg {
    height: 100vh;
    background-size: cover;
}
 cs

height를 100%로 하게되면 부모 크기의 100%로 가지만 100vh를 하게되면 그냥 단독적으로 화면에 꽉차게 만듬

background-size에서 cover를 쓰는 이유는 화면 전체를 꽉 채워준다고함

 

캬

저작자표시

'자바스크립트 > momentum' 카테고리의 다른 글

[자바스크립트] momentum 기초 완성  (0) 2022.06.08
[자바스크립트] momentum 완성하기  (0) 2022.06.05
'자바스크립트/momentum' Related Articles more