일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- iOS 개발자
- IOS
- 비전공 개발자
- 개발자
- front-end
- 애니메이션
- HTML
- jQuery
- iPhone
- php
- keyframes
- effect
- CSS
- html5
- image
- button
- xcode
- 프론트엔드
- css3
- react
- Animation
- SWIFT
- ipad
- 비전공자
- javascript
- 풀스택
- 자바스크립트
- 백엔드
- hover
- MAC
- Today
- Total
목록비전공 개발자 (290)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/yfwS1/btrIyodgFvF/2m323ZKuKjkHHECndrXX81/img.jpg)
Live User Filter Search by name and/or location Loading... @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #f8f9fd; font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { border-radius: 5px; box-shadow..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/DXqHs/btrIyxO97tI/o0WlyhKkP5Yxg8N3LeoFa0/img.jpg)
body { background: linear-gradient(#0007, #0000), #123; margin: 0; height: 100vh; overflow: hidden; } @keyframes firework { 0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; } 50% { width: 0.5vmin; opacity: 1; } 100% { width: var(--finalSize); opacity: 0; } } /* @keyframes fireworkPseudo { 0% { transform: translate(-50%, -50%); width: var(--initialSize)..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vWwN1/btrIAEMR4jT/4y486dw0vHMky43e4OPtMK/img.jpg)
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; overflow: hidden; height: 100vh; } i { position: absolute; height: 200px; background: linear-gradient(transparent, #FFF); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; animation: animate 5s linear infinite; } i:nth-child(3n + 1) { background:linear-gradient(transparent, #ABFFB2); } i:nth-child(..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bfwpk8/btrIpHDTOqq/LLit30K8EAAcizy4UbHA41/img.jpg)
0 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EDF1F4; } .box { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; background: linear-gradient(to bottom, rgba(0, 0, 0, .05), #EDF1F4); border-radius: 40px; box-shadow: 15px 15px 20px rgba(0,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dJ2p4h/btrIi563Sq9/r0UKTIruyxOE8cA6Bj0BK0/img.jpg)
body{ margin: 0; padding: 0; background: lightblue; } div{ width: 70px; height: 70px; border-radius: 35px; background: #3AC371; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .white{ width: 80px; height: 80px; border-radius: 40px; background-color: #fff; box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3); } .white::before{ content: ""; top: 65px; left: -15px; border-width: 2..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xFc5J/btrIhirhSMt/v41KNR3WOO4DHaqTAue8j1/img.jpg)
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .bubble { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 25px rgba(255, 255, 255, .25); animation: animate 8s ease-in-out infinite; } .bubble:nth-child(2) { position: relative; zoom: .45; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/diUUFz/btrIdDH28zb/oZVw94J2F4pu2sI1KdYwAK/img.jpg)
Notifications 1 * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); font-size: calc(40px + (60 - 40) * (100vw - 320px) / (1280 - 320)); } body, button { color: var(--fg); font: 1em/1.5 "DM Sans", sans-serif; } body { background: var(--bg); height: 100vh; display: grid; place-items: center; } .notificati..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Xso3z/btrH32IKVJ9/crJ4u3L3Mq31wkyKG547x0/img.jpg)
* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1 { text-align: center; } ul { position: relative; display: flex; gap: 40px; } ul li { position: relative; list-style: none; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #FFF; box-shadow: 0 15px 35p..