import React, { useRef, useState, forwardRef } from 'react'import './App.css'const Modal = forwardRef(({ open, setOpen, handleDown, handleMove, handleUp, left, top }, ref) => { return 모달 setOpen(false)}>x })function App(){ const [open, setOpen] = useState(false) const [clicked, setClicked] = useState(false) const [posX, setPosX] = useState(0) const [left, setLeft] =..

import React, { useState, useEffect, useRef } from 'react'import './App.css'import Dropdown from './Dropdown'const dropdownMenu = { 'Home': ['home-1', 'home-2'], 'About': ['about-1', 'about-2', 'about-3'], 'Contact': ['contact-1']}function App(){ const [page, setPage] = useState('') // 현재 선택한 메뉴 저장 const [layout, setLayout] = useState({}) // 현재 드롭다운 위치 저장 const [target, setTarg..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod provident dignissimos veritatis rem a dolores aperiam ex. Maiores obcaecati nulla, dolor unde praesentium repellat nemo magni temporibus? Et, esse? Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis, provident nam delectus vel ea odit, veniam ullam similique tenetur, magni dolore commodi possimus aliqu..

1 body{ margin: 0; height: 100vh; } .bar{ width: 50px; background-color: aqua; animation: grow 1s linear .5s forwards; position: absolute; bottom: 0; } @keyframes grow{ from{ height: 0; } to{ height: 100%; } }

body{ margin: 0; } .bg{ width: 100%; height: 100vh; background-image: url(bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .circle{ width: 300px; height: 300px; border-radius: 50%; background-color: gray; position: absolute; transform: translate(-50%, -50%); border: 3px solid #333; mix-blend-mode: multiply; cursor: zoom-in; filter: blur(10px); } .gray..

body{ margin: 0; padding: 100px; text-align: center; } input{ width: 20rem; height: 5rem; outline: none; border: none; border-bottom: 2px solid #eee; font-size: 2rem; color: #ccc; } input::placeholder{ font-size: 2rem; } const input = document.querySelector('input') input.addEventListener('keyup', function(e){ if ((e.keyCode >= 48 && e.keyCode = 96 && e.keyCode { console.log(parseInt(c) == c) re..

format_color_text format_color_text body{ text-align: center; } .container{ max-width: 2rem; display: inline-flex; flex-flow: column; align-items: center; position: relative; } .color-box{ width: 10rem; background-color: #333; position: absolute; display: none; bottom: -11rem; } .color-box::before{ content: ''; width: 1.4rem; height: 1.4rem; background-color: #333; position: absolute; left: 50%;..

https://spicyyoghurt.com/tools/easing-functions Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matching equation spicyyoghurt.com easing func..

body{ margin: 0; padding: 0; text-align: center; } #box-container{ width: 100%; height: 100vh; background-color: lightsalmon; display: flex; justify-content: center; align-items: center; } .box{ width: 30px; height: 30px; border-radius: 50%; background-color: lightpink; transition: all 0.5s; margin-left: 20px; user-select: none; } const boxes = document.querySelectorAll('.box') let index = 0, pr..

기본적인 아이디어는 아래 링크로 걸어둔 Easing 기법을 이용한다. https://spicyyoghurt.com/tools/easing-functions Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matchin..