// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중//
오늘 어제 투두 기능을 prac을 변수에 붙여서 똑같이 써보려고 했는 데 실패했다...
그리고 빠르게 다음 강의로 넘어가서 배경 이미지 변경으로 넘어갔는데 확실히 CSS를 잘 못 다루면 큰 의미가 없는 듯..
배울 것이 너무 많다...
또, 국비지원 강의 이제 정해야 하는 데 이것도 생각보다 쉬운 게 아니다..
었쨌든 어제 하나하나 투두리스트 따라해서인지 오늘은 술술 넘어간 편이긴 하다.
이번에는 따로 순서대로 하나씩 확인하면서 하진 않았다.
<HTML>
<script src="JS/bg.js"></script>
확실하게 배운 것은 기능마다 js를 따로 빼줘야 된다는 사실이다.
<CSS>
body {
background-color: #2c3e50;
}
body {
color: white;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /*뒤로 보내는 듯 */
animation: fadeIn 0.5s linear;
}css를 예쁘게 다뤄서 컴퓨터 메인 화면에 모멘텀 쓰고 싶은데,
강의 마저듣고 좀 꾸며 봐야 겠다.
@keyframes가 뭔지.. 아예 몰라서...
<JS>
const body = document.querySelector("body");
const IMG_NUMBER = 5; //숫자는 원하는 대로 바꾸면 됌.
function paintImage(imgNumber) {
const image = new Image();
image.src = `images/${imgNumber + 1}.jpg`; // +1을 하는 이유는 Math.random()이 0을 줄 수도 있기 때문에
image.classList.add("bgImage");
body.appendChild(image);
// image.addEventListener("loadend", handleImgLoad); // API에서 일을 하고 있는 게 아니면 필요 없음.
}
function genRandom() {
const number = Math.floor(Math.random() * 5); //5까지 숫자 랜덤으로 나머지 없이
return number;
}
function init() {
const randomNumber = genRandom();
paintImage(randomNumber);
}
init();
1. const body = document.querySelector("body");
어차피 화면 전체 넣을 거니깐 그냥 body로 설정
2. 초기화 할 것 부터
function init() {
const randomNumber = genRandom(); //3. 만들고 올라옴.
paintImage(randomNumber); //6. 마지막으로 활성화
}
init();
3. function genRandom 만들기
function genRandom() {
const number = Math.floor(Math.random() * 5); //* 5까지 숫자 랜덤으로, Math.floor: 나머지 없이 +cell은 소수점 무조건 올림.
return number;
}
4. const IMG_NUMBER = 5; //숫자는 원하는 대로 저장된 이미지 수로 바꾸면 됌. // 정확한 순서는 기억나지 않는데 변수를 함수에서 활용하지 않은 듯 핸들러 위함이었나?
5. function paintImage 만들기
function paintImage(imgNumber) {
const image = new Image(); // 이미지가 새로고침 시 바뀌게
image.src = `images/${imgNumber + 1}.jpg`;
// +1을 하는 이유는 Math.random()이 0을 줄 수도 있기 때문에, 우리가 할당한 이미지는 1부터 시작이니까.
image.classList.add("bgImage"); // list 추가
body.appendChild(image); //body에 image 넣어주기
// image.addEventListener("loadend", handleImgLoad); // API에서 일을 하고 있는 게 아니면 필요 없음. 핸들러 펑션 만들었다가 삭제함. 아마도 사이트에서 이미지를 무작위로 가져오는 것을 의미하는 듯.
}
엄청 복잡하지는 않는데.. 진짜 문제는 css...
'Web Developing > JS' 카테고리의 다른 글
| [JS] 개념:Call Stack (1) | 2024.03.16 |
|---|---|
| [JS] 날씨 정보 나타나게 하기 (API사용) (1) | 2024.03.16 |
| [JS] to-do list 만들기 (1) | 2024.03.16 |
| [JS] form 만들고 저장하기 (사용자 이름 기억하게 하기) (2) | 2024.03.16 |
| [JS] 시계 만들기 (2) | 2024.03.16 |