전체 글

미리보기 배경프론트엔드 개발 시 전체 화면에 폭죽 애니메이션이 실행되는 요소처럼 화면 최상단에 위치하고 화면 전체를 차지하는 요소를 사용해야하는 상황이 있습니다. (이하 최상위 요소로 표현합니다.)이 때, 최상위 요소는 최상단에 위치하며 화면 전체를 차지하고 있기 때문에 최상위 요소 뒷부분의 요소들을 클릭하고 싶어도 모든 이벤트가 가로막히게 됩니다.이에 최상위 요소를 뚫고 이벤트(클릭 등)를 통과시키는 기능이 필요하며 이는 최상위 요소 css에 아래 속성을 추가하여 간단하게 구현할 수 있습니다. 코드// 아래 속성을 최상위 요소에 삽입합니다.pointer-events: none;// 예시 안녕? 나 최상위 요소 ^-^

미리보기 설치npm install @tsparticles/react @tsparticles/engine @tsparticles/preset-confetti @tsparticles/shape-text 컴포넌트 코드src / components / TextConffeti.tsx"use client";import { useEffect, useState } from "react";import Particles, { initParticlesEngine } from "@tsparticles/react";import { IOptions, RecursivePartial } from "@tsparticles/engine";import { loadConfettiPreset } from "@tsparticles/preset..

미리보기 설치npm install @tsparticles/react @tsparticles/engine @tsparticles/preset-confetti @tsparticles/shape-text 코드1) 입자 색상 변경"use client";import { useEffect, useState } from "react";import Particles, { initParticlesEngine } from "@tsparticles/react";import { IOptions, RecursivePartial, type Container } from "@tsparticles/engine";import { loadConfettiPreset } from "@tsparticles/preset-confetti";im..

1. 소개안녕하세요!오늘은 웹 애플리케이션에 멋진 입자 효과를 추가할 수 있는 tsparticles 라이브러리의 핵심 기능 중 하나인 'Emitters(에미터)' 속성에 대해 자세히 알아보겠습니다.에미터는 입자를 생성하고 방출하는 소스로, 다양한 시각적 효과를 만들 수 있게 해주는 강력한 도구입니다.에미터란 무엇인가?에미터(Emitter)는 tsparticles에서 입자(particles)를 생성하고 방출하는 소스입니다. 쉽게 말해 입자가 어디서, 어떻게, 얼마나 많이, 얼마나 자주 생성될지를 제어하는 객체입니다. 폭죽, 분수, 연기 등의 효과를 만들 때 특히 유용합니다. 2. 에미터 속성 상세 설명 에미터는 다양한 속성을 통해 세밀하게 제어할 수 있습니다. 주요 속성들을 하나씩 살펴보겠습니다.1) p..

설치npm install tsparticles @tsparticles/engine @tsparticles/preset-confetti @tsparticles/react @tsparticles/slim 미리보기 예시 코드"use client";import { useEffect, useState } from "react";import Particles, { initParticlesEngine } from "@tsparticles/react";import { type Container } from "@tsparticles/engine";import { loadFull } from "tsparticles";import { loadConfettiPreset } from "@tsparticles/preset-con..

const colors = [ "#000000", // 블랙 "#FFFFFF", // 화이트 "#FFB6B9", // 메인 핑크 "#FF9E7A", // 소프트 코랄 (선명하고 부드러움) "#FFDC5E", // 라이트 머스타드 옐로우 (시인성 좋음) "#A3E048", // 라임그린 계열 (상큼하고 밝음) "#62D2FA", // 맑은 하늘색 (가독성 좋음) "#6C91F2", // 라이트 블루-퍼플 (딥톤 파스텔) "#BFA2FF", // 선명한 연보라 (파스텔 감성 유지) "#FF9CE6", // 비비드 핑크 퍼플 (팝한 포인트) "#C2C2C2", // 밝은 회색 (밸런스용) "#FF7F50", // 코랄 오렌지 (기존 유지) "#7FC8A9", // 민트 포인트 (기존 유..

미리보기 설치npm install motion/reactnpm install @mui/material 코드// 라이브러리 임포트import { motion } from "motion/react";import { styled } from "@mui/material";// 컴포넌트 정의const AnimatedCircle = () => { const draw = { hidden: { rotate: 90, pathLength: 0, opacity: 0 }, visible: { pathLength: 1, opacity: 1, transition: { pathLength: { type: "spring", duration: 1.5, bounce: 0 }, ..

설치npm install @emotion/is-prop-valid shouldForwardProp 정의src / utils / mui.tsimport isPropValid from "@emotion/is-prop-valid";export const shouldForwardProp = (prop: PropertyKey) => typeof prop === "string" && isPropValid(prop) && !prop.startsWith("$"); shouldForwardProp 사용src / components / Example.tsx================================= shouldForwardProp 임포트import { shouldForwardProp } from "@/..