일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- jQuery
- 프론트엔드
- xcode
- 애니메이션
- 자바스크립트
- Animation
- 비전공 개발자
- 풀스택
- css3
- ipad
- iOS 개발자
- SWIFT
- keyframes
- IOS
- iPhone
- 비전공자
- button
- html5
- hover
- HTML
- react
- effect
- MAC
- 백엔드
- php
- 개발자
- image
- front-end
- javascript
- CSS
- Today
- Total
목록HTML (66)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b0dOeS/btrUwrKC5Cw/WSULRC4pQuWzHkwO1Si671/img.png)
Decimal Binary Converter Decimal: Binary: * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #667ABA; } .container { background-color: #ffffff; width: 80vmin; max-width: 37.5em; padding: 3em 2.5em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 0.62em; box-shadow: 0 1.2em 2.5em rgba(0, 21, 4..
![](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/cgLIJJ/btrTbUMC3t1/rKDAb0YZ4KfaPo9XYQB6K0/img.png)
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } body { height: 100vh; background: linear-gradient(to bottom, #f9544c 50%, #090c31 50%); } .calculator { width: 400px; background-color: #15173c; padding: 50px 30px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4); }..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cispJf/btrSJUsI6pZ/ug5MxOQ6ZdVZCqo4nrqcB0/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .box { width: 340px; height: 200px; display: flex; } .box .circle { min-width: 200px; height: 200px; border: 25px solid #FFF; border-radius: 50%; } .box .circle:nth-child(1)::before { content: ''; position: absol..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/RoJPv/btrRv77k2Hb/l82TohU3NiXJE4I0YwB6DK/img.png)
01 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 02 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 03 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-c..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bupoGb/btrKZ7fwG0P/RJkukIezREwOWnqZMK0Z50/img.jpg)
Swipe Next * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #28272A; } .btn { position: relative; width: 200px; height: 60px; background-color: rgba(255, 255, 255, .1); border-radius: 60px; display: flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, .1); text-d..
![](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..