일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- front-end
- image
- MAC
- 비전공자
- 백엔드
- 비전공 개발자
- effect
- 프론트엔드
- 풀스택
- iOS 개발자
- Animation
- javascript
- php
- HTML
- html5
- IOS
- react
- button
- jQuery
- iPhone
- 자바스크립트
- ipad
- 개발자
- keyframes
- 애니메이션
- hover
- SWIFT
- xcode
- CSS
- Today
- Total
목록Var (10)
비전공자 개발일기
![](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/1ZIaC/btrTiWw34rr/m2ryGOyN34d35LCNBoqzb1/img.png)
Home About Services Work Team Contact * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #FFF; } ul li{ list-style: none; text-align: center; } ul li a { color: #333; text-decoration: none; font-size: 2em; font-weight: 300; padding: 5px 20px; display: i..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bRmfXq/btrTgqyULTH/AKtgGUAlG54ysiNY54box1/img.png)
Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not cross - Police line do not c..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxng7g/btrRMKZzxFL/qMmqUzcffa9snuZ9eUGhC0/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --clr: #4FB6FF; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--clr); } .box { position: relative; width: 400px; height: 320px; background: #FFF radial-gradient( var(--clr) 0px, var(--clr) 7px, transparent 0px ); background-size: 20px 20px; background-position: -10px; } ...
Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature Some feature Description of the awesome Feature html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #060606; } body { display: fl..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/buY19g/btrNAwJ1bpu/tC5lIbcPk0CKcr4AZ2WEc0/img.jpg)
* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2F363E; } .menu { width: 280px; height: 280px; display: flex; justify-content: center; align-items: center; } .menu li { position: absolute; left: 0; list-style: none; transition: .5s; transition-delay: calc(.1s * var(-..
![](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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/HA6hu/btrHWGEx8w8/hKNlvWBUhmL3DDemEthkQK/img.jpg)
* { background-color: #2598EB; } .wrapper { --imagesize: 300px; --transform: calc(var(--imagesize) / 2); perspective: 800px; } .wrapper:hover { transform: scale(1.5); } .cube { transform-style: preserve-3d; position: relative; width: var(--imagesize); height: var(--imagesize); animation: rotate 10s ease-in-out infinite; transform-origin: center center; margin: 250px auto; } .side { position: abs..