일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- hover
- 비전공자
- CSS
- Animation
- 개발자
- ipad
- css3
- php
- jQuery
- 풀스택
- front-end
- button
- 자바스크립트
- 프론트엔드
- HTML
- SWIFT
- 백엔드
- 애니메이션
- 비전공 개발자
- IOS
- image
- iOS 개발자
- react
- MAC
- html5
- keyframes
- javascript
- iPhone
- xcode
- effect
- Today
- Total
목록javascript (248)
비전공자 개발일기
![](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/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/QTZYG/btrTRFHZwIW/1Efj9C3MD7d0kbc8iQIAK1/img.png)
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } .container { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } #battery { box-sizing: content-box; height: 7.8em; width: 17.5em; border: 0.6em solid #246aed; margin: auto; border-radius: 0.6em; position: relative; display: grid; place-items: center; } #battery:before { position:..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dLhN30/btrTEZtPb8s/AjBCWQGnRVnO3yYYVOjF70/img.png)
Search * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f4c531; } .container { background-color: #ffffff; font-size: 16px; padding: 3em 2.8em; width: 90vw; max-width: 32em; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 0.6em; } .search-container { width: 100%; display: grid; grid-templat..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tiK6l/btrTEZs353r/68Q0Xwln2mnNpQdzqLkjo1/img.png)
Principal($): Rate: Time: Year Month Calculate * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(#01e26e, #72ffb4); } .container { background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 80vw; max-width: 600px; min-width: 350px; padding: 60px 30px; border-..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/X7pb4/btrTt2wUygi/kKkhqVha1f228WeThkdXmk/img.png)
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, magni. Lorem, ipsum. Get Quote * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f43543; } .wrapper { width: 400px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .container { width: 100%; background-color: #f43543; padding: 50px 40px;..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mX8in/btrTgqMWKx6/G5fHhsvxYAS3kFDdMx7pj1/img.png)
Click on the 'Get Location' Button Get Location * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(45deg, #0076ec, #42a1ff); } .container { width: 80vw; max-width: 37.5em; background-color: #ffffff; padding: 3em 1.8em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 0..