일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- css3
- 백엔드
- 개발자
- 자바스크립트
- iPhone
- hover
- xcode
- 애니메이션
- front-end
- html5
- 프론트엔드
- IOS
- jQuery
- 비전공 개발자
- javascript
- SWIFT
- ipad
- Animation
- react
- MAC
- keyframes
- button
- CSS
- iOS 개발자
- effect
- 풀스택
- php
- image
- HTML
- 비전공자
- Today
- Total
목록CSS (62)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TX62K/btrVBRe83yO/k9zuzmfChrQdzanCGHvK4k/img.png)
:root { --bar-color1: #1FE576; --bar-color2: #D7E5DE; --bar-width: 200px; --bar-height: 20px; --anim-duration: 3s; } body { background-color: #B0B0B0; display: flex; justify-content: center; align-items: center; } .progress-bar { position: relative; margin-top: 25%; width: var(--bar-width); height: var(--bar-height); border-radius: calc(var(--bar-height) / 2); overflow: hidden; background-color:..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nnbuw/btrURQCwB2Y/9BZSTNKqkpVTczjQrwyZ3k/img.png)
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #bb2649; } .wrapper { background-color: #ffffff; position: absolute; width: 80vw; max-width: 41em; min-height: 25em; border-radius: 0.6em; transform: translate(-50%, -50%); left: 50%; top: 50%; box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15); display: flex; } .testimonial-container..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/czfdKN/btrUSy1L5vz/kE5gO4VR2K50v2tDeky4bk/img.png)
Start Year: End Year: Get Leap Years * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #bb2649; } .container { background-color: #ffffff; width: 90vw; max-width: 37.5em; position: absolute; padding: 3em 1.8em; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 8px; box-shadow: 0 1em 2em rgba(112, 90, 23, 0.3); } ...
![](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..