[Canvas-불꽃놀이-02] UI 구성

이전 글 : [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되었다.빌드 도구로는 빠르고 비교적 설정하기가 간편한 Vite을 선택하였다.  1. github repository 생성https://githubjinsk-joy.tistory.com 화면 html, css 구성1. 화면 UI 구성하기글자를 입력한 후 불꽃놀이처럼 터지게 하는 효과를 만들기 위해 크게 두 가지의 화면으로 구성하였다구성 : 홈 (입력화면) / 캔버스 (불꽃놀이 효과)배경 : 우주느낌을 주고 싶어서 배경색을 검은색으로 설정하였다.안내 문구 : 안내문구에 애니메이션을 적용해 사용자들이 쉽게 인식할 수 있도록 유도하였..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 16.
• textsms

[Canvas-불꽃놀이-01] 프로젝트 초기화

글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되었다.빌드 도구로는 빠르고 비교적 설정하기가 간편한 Vite을 선택하였다.  1. github repository 생성https://github.com/jinsk9268/text-fireworks GitHub - jinsk9268/text-fireworksContribute to jinsk9268/text-fireworks development by creating an account on GitHub.github.com 2. Vite 프로젝트 생성난 자동화로 진행하였다. 터미널에서 아래와 같이 명령어를 입력하면npm create vite@latest 프로젝트명 Vite 프로젝트가 생성이 되는데 바닐라 자바스크립트로 할거라 f..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 15.
• textsms