일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- CSS
- Animation
- xcode
- image
- hover
- effect
- 개발자
- 비전공자
- react
- ipad
- iOS 개발자
- button
- 애니메이션
- MAC
- HTML
- 풀스택
- 백엔드
- 비전공 개발자
- php
- 프론트엔드
- html5
- front-end
- jQuery
- SWIFT
- css3
- iPhone
- IOS
- keyframes
- javascript
- 자바스크립트
- Today
- Total
목록비전공 개발자 (290)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bevAIN/btrHqP34S4H/qWfHfCNxdf0fXAeRFDdwUK/img.jpg)
body { margin: 0; background-color: #eee; background-image: url("https://images7.alphacoders.com/938/thumb-1920-938300.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; overflow: hidden; } .overlay { background-color: rgba(255, 255, 255, 0.4); width: 100vw; height: 100vh; position: absolute; } .card { backdrop-filter: blur(5px); min-width: 3..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dpaP9G/btrHqn64Oio/a9pyuHfGkWf23D5OKxVoDK/img.jpg)
body { background: black; } .progress { --progress: 0%; width: 500px; height: 50px; margin: 9em auto; border: 1px solid #fff; padding: 12px 10px; box-shadow: 0 0 10px #aaa; } .progress .bar { width: var(--progress); height: 100%; background: linear-gradient(gold, #c85, gold); background-repeat: repeat; box-shadow: 0 0 10px 0px orange; animation: shine 4s ease-in infinite, end 1s ease-out 1 7s; t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lcldG/btrHiWvZmDC/HM0O92gkzhzPxrkGBzZTHk/img.jpg)
Purple button Green button Red button Blue button Yellow button html, body { height: 100%; } body { display: grid; place-content: center; } .btn { background: hsl(var(--hue), 98%, 80%); border: none; border-radius: 7px; cursor: pointer; color: black; font: 600 1.05rem/1 "Nunito", sans-serif; letter-spacing: 0.05em; overflow: hidden; padding: 1.15em 3.5em; min-height: 3.3em; position: relative; t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bM0rfC/btrHdKWvuNw/yEnYkSIYD4sKKAnetGr9M0/img.jpg)
F O C U S * { margin: 0; padding: 0; box-sizing: border-box; /* font-family: monospace; */ } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg, #FF0057, #2196F3); } h2 { position: relative; display: flex; gap: 5px; color: #FFF; font-size: 4em; cursor: pointer; } h2 span { position: relative; filter: blur(5px); padding: 0 5px;..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bz53nd/btrG5rDGbXR/H972VKwm7R76X0UTbPRSLK/img.jpg)
menu search search videocam apps notifications account_circle home Home local_fire_department Trending subscriptions Subcriptions library_add_check Library history History play_arrow Your Videos watch_later Watch Later thumb_up Liked Videos Recommended Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn FutureCoders 10M Views • 3 Months Ago Build A Password Generat..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bk86C2/btrG1yh68A4/87yYvmokNsPQaVBsmFhjV0/img.jpg)
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap'); :root{ --color: #333; } body { font-family: 'Red Hat Text', sans-serif; } .container { text-align: center; color: var(--color); width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url(https://images.unsplash.com/photo-1..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xveWM/btrGRHNa1js/1e65wCgD4KMX1BhGwtJHbK/img.jpg)
.container { width: 100vw; height: 80vh; display: flex; justify-content: center; align-items: center; } .slider { height: 750px; width: 100vw; display: flex; perspective: 1000px; position: relative; align-items: center; } .box1 { background: url("https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); background-size: cover; background-pos..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/vuREq/btrGQaVGU3S/kBDcZnCPsL3rMwSWHP42g1/img.jpg)
1 4 3 6 5 2 body { margin: 12% 40%; background-color: #CCC; } .container { width: 300px; height: 300px; position: relative; perspective: 1000px; } .cubic { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ(-200px) rotateZ(180deg) rotateX(45deg); animation: spin 3s infinite linear; } .cubic .surface { width: 100%; height: 100%; font-size: 130px; fo..