일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- HTML
- react
- SWIFT
- MAC
- 자바스크립트
- 백엔드
- effect
- 비전공 개발자
- Animation
- 비전공자
- 개발자
- ipad
- hover
- CSS
- button
- php
- html5
- javascript
- image
- 애니메이션
- keyframes
- IOS
- xcode
- jQuery
- 프론트엔드
- iOS 개발자
- front-end
- 풀스택
- css3
- iPhone
- Today
- Total
목록프론트엔드 (470)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tEKdN/btrUAbTmjs5/RDLkDnoKY3qivCEmwUxVCk/img.png)
움직이는 눈, 산타 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { background: linear-gradient(#A2000A, #CF0000); display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 100%; height: 100vh; overflow: hidden; } .container::before { content: ''; position: absolute; bottom: 0; width: 100%; height: 200px; background-image: url('t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/19Wqg/btrUvUSwN3K/gFpa5MPkD3tltRbNMU6my0/img.png)
실제 영상 Grid Width 00 Grid Height 00 Create Grid Clear Grid Erase Paint * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } body { background-color: #f4c531; } .wrapper { background-color: #ffffff; width: 80vmin; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 40px 20px; border-radius: 8px; } label { display: block; } span..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b1tZcx/btrUun70mD3/y6uduvtHhDtz5xbtkM0yA0/img.png)
realtime on display EMOJI CURSOR TRAIL EFFECT * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; pointer-events: none; width: 10px; height: 10px; animation: animate 1s linear infinite; } @keyframes animate { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { translate: 0 100px; opacity: 1..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cbuSEZ/btrUmi7twIz/cUEQAzF9tda4LS34h0AEk0/img.png)
Start 1 of 3 questions 10s Next Demo Score Restart * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #0a69ed; } .start-screen, .score-container { position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } button { border: none; outline: none; cursor: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zsTqk/btrUh2Crol9/gjzJCM5l6FZRvkUSleNekk/img.png)
2,000,000,000 :root { --color-green-200: #197302; --color-green-600: #36FE04; } body { background: #000; display: grid; height: 100vh; min-height: 100dvh; place-items: center; } .number { color: #f09; font-size: 10vw; font-weight: bold; background-image: linear-gradient(var(--color-green-600), var(--color-green-600)), linear-gradient(var(--color-green-200), var(--color-green-200)); -webkit-backg..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FcyqS/btrUbxvQLqA/9SrHQsl9Yx90KZDtwgohb0/img.png)
result * { padding: 0; margin: 0; box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: #111; } section { width: 80vw; padding: 1.75rem 1.25rem; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; font-size: 60pt; color: #0000; background: repeating-radial-gradient(blue 0 0.001%, red 0 0.0001%) 50% 0/2500px 2500px,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cEEw6J/btrT4qSiTxL/1YzC6BipBysd5XvB8ZwQHk/img.png)
Numbers API http://numbersapi.com/ Numbers API NumbersAPI An API for interesting facts about numbers Bring meaning to your metrics and stories to your dates An API for interesting facts about numbers Bring your metrics and dates to life Let your metrics tell tales with our API of number facts What tale numbersapi.com Get Fact Get Random Fact * { padding: 0; margin: 0; box-sizing: border-box; fon..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bvipPO/btrTUDqjYbh/4phodK9VPbZKvpPQWadsv1/img.png)
1234 5678 9012 3456 Tony Stark 10/19 06/21 :root { font-size: 24px; } body { background: #1488cc; /* fallback for old browsers */ background: linear-gradient(to left, #283593, #1976d2); height: 100vh; font-family: "Josefin Sans", sans-serif; } /* Background circles start */ .circle { position: absolute; border-radius: 50%; background: radial-gradient(#006db3, #29b6f6); } .circles { position: abs..