일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- php
- Animation
- MAC
- xcode
- 개발자
- ipad
- button
- 비전공 개발자
- 백엔드
- 풀스택
- 자바스크립트
- iOS 개발자
- CSS
- keyframes
- hover
- HTML
- SWIFT
- IOS
- css3
- 애니메이션
- javascript
- html5
- image
- 비전공자
- effect
- jQuery
- react
- 프론트엔드
- front-end
- iPhone
- Today
- Total
목록Javascript (176)
비전공자 개발일기
Welcome to Random Color Generator Click on the HexCode to Copy Generate #967b28 #df9d4f #af704f #97013b #14ae2e * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to right, #967b28 0%, #967b28 20%, #df9d4f 20%, #df9d4f 40%, #af704f 40%, #af704f 60%, #97013b 60%, #97013b 80%, #14ae2e 80%, #14ae2e 100%); } #pallete1, #pallete2, #pallete3,#pallete..
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; perspective: 800px; overflow: hidden; display: grid; place-items: center; background:linear-gradient(#3a4149, #111722); } main { position: relative; transform-style: preserve-3d; width: 50vmin; height: 75vmin; transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1); } img { width: 100%; height: 100%; object-fit: cover; transit..
DRAG ME body { margin: 0; height: 100vh; background-image: radial-gradient(#e0dada, #dcefb6); font-family: Arial, Helvetica, sans-serif; } .box { position: fixed; top: 35%; left: 40%; background: #eee; box-shadow: #999 0px 8px 20px 0px; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; user-select: none; } (() => { class Box { constructor() { this.box = do..
SUBMIT body { background: #1d1f20; } main { width: 100vw; height: 100vh; } .button { background: #2b2d2f; width: 200px; height: 80px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; cursor: pointer; border-radius: 4px; } .text { font: bold 1.25rem/1 poppins; color: #71dfbe; position: absolute; top: 50%; transform: translateY(-52%)..
body { background-color: #000; height: 100vh; display: flex; justify-content: center; align-items: center; } .lock { position: relative; width: 50px; height: 50px; background-color: #000; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; border: 2px solid #fff; transition: all .8s; cursor: pointer; } .lock::after { position: absolute; conten..
ALARM APP Enter the Time : SET STOP :root { --bg-prim: #12181b; --bg-sec: #383838; --clr: #fff; } body { padding: 0; margin: 0; box-sizing: border-box; background-color: var(--bg-prim); } nav { text-align: center; padding: 0 1rem; color: var(--clr); background-color: var(--bg-sec); } .container { margin: 5rem auto; background-color: var(--bg-sec); padding: 1rem; color: var(--clr); display: flex;..
TOKYO body { background-color: #000; } .container { display: flex; justify-content: center; align-items: center; perspective: 500px; } #card { position: relative; width: 250px; height: 350px; margin: 10%; background: url("url") center no-repeat; background-size: cover; border: 2px solid violet; border-radius: 10px; transform-style: preserve-3d; will-change: transform; transition: all .5s ease-ou..
RESTART 100% 100% 100% * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #101010; font-family: sans-serif; } .restart { width: 250px; height: 50px; margin: 100px 831px 0; cursor: pointer; } .container { display: flex; max-width: 900px; margin: -260px auto; justify-content: space-around; align-items: center; flex-wrap: wrap; height: 100vh; padding: 20px; } .container .card {..