새로 쓰는 사용 설명서

vite로 바닐라 js 프로젝트를 구성하고 이를 빌드한 후, 정적 배포를 해본다. 서버는 아파치 서버를 사용하고, 도메인은 codestack.blog이다. 그리고 서브 디렉터리로 falling-snow-effect를 사용하고 codestack.blog/falling-snow-effect에 정적 배포를 하려 한다. 이를 위해서는 아파치 정적 파일 기본 경로인 /var/www/html에 /falling-snow-effect 디렉터리를 구성하고 해당 디렉터리에 빌드한 파일을 업로드한다. vite 빌드를 하기 전에 경로의 prefix를 지정하기 위해서는 vite.config.js에 base 속성에 prefix 경로를 지정한다. export default { base: "/falling-snow-effect/"..

이전 글 : https://manualbook.tistory.com/128 falling snowflake effect js - 프로젝트 폴더 구성 및 기본 코드눈이 떨어지는 애니메이션 효과를 구현해보고 싶다. vite + 바닐라 js조합으로 프로젝트를 구성하고 클래스 문법을 사용하여 눈송이가 떨어지는 효과를 구현해본다. main.jsimport "./style.css";import {manualbook.tistory.com  이전 글에서 canvas에 이미지를 그려서 눈송이를 표시하는 방식에서 img 태그로 눈송이를 출력하고 이를 div 태그에 추가하는 방식으로 변경해 봤다. main.jsimport "./style.css";import { Manager } from "./manager";functio..

눈이 떨어지는 애니메이션 효과를 구현해보고 싶다. vite + 바닐라 js조합으로 프로젝트를 구성하고 클래스 문법을 사용하여 눈송이가 떨어지는 효과를 구현해본다. main.jsimport "./style.css";import { Manager } from "./manager";const canvas = document.createElement("canvas");const app = document.querySelector("#app");app.append(canvas);const ctx = canvas.getContext("2d");const manager = new Manager(ctx);manager.draw(); manager.jsimport { Snow } from "./snow";export c..

.btn-general { display: inline-block; width: 300px; max-width: 100%; padding: 20px 10px; background-color: #e25c00; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); color: #fff; font-size: 18px; line-height: 1.5; text-align: center;}.btn-warning { display: inline-block; width: 300px; max-width: 100%; padding: 20px 10px; background-color: #f1de00; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1..