일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- jQuery
- Animation
- effect
- hover
- HTML
- css3
- front-end
- image
- 비전공 개발자
- keyframes
- html5
- 백엔드
- php
- ipad
- MAC
- 애니메이션
- SWIFT
- iOS 개발자
- 비전공자
- javascript
- button
- CSS
- IOS
- iPhone
- 자바스크립트
- 풀스택
- 프론트엔드
- xcode
- react
- 개발자
- Today
- Total
목록card (9)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/boELVr/btrV5AL1I5t/LKCw6vqVjuf099jvQGq700/img.png)
Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More Launch Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, voluptate? Read More * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; jus..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/czxpYp/btrUusWHynb/t1HQ09YkZZ5BWvTe30Kd2k/img.gif)
Firebase Realtime Database 비관계형 클라우드 데이터베이스 실시간으로 동작(HTTP 요청이 아닌 동기화 방식) 오프라인(로컬에 저장 후 네트워크 연결시 동기화) 서버없이 데이터베이스와 클라이언트가 직접 액세스 하나의 큰 JSON 트리 정렬 || 필터링 깊고 좁은 쿼리 많은 데이터 베이스 적은 양의 데이터가 자주 변경 Firebase Firestore Database 비관계형 클라우드 데이터베이스 실시간으로 동작(HTTP 요청이 아닌 동기화 방식) 오프라인(로컬에 저장 후 네트워크 연결시 동기화) 서버없이 데이터베이스와 클라이언트가 직접 액세스 문서 컬렉션 정렬 && 필터링 얇고 넓은 쿼리 단일 데이터베이스 대용량 데이터가 자주 읽힘 https://github.com/munsangu/S..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Hd8Zo/btrSPRvAemC/vtZIrHfsOK1unz43ygITcK/img.png)
New Apple Watch $500 Buy Now * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #09383E; } .card { width: 300px; height: 400px; background-color: #FFF; transform-style: preserve-3d; transform: perspective(2000px); transition: 1s; box-shadow: inset 300px 0 50px rgba(0, 0,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cTD54o/btrPPOiGNfE/SVwRRYOhynizUToXl9kKKk/img.png)
Parallax Tilt Effect Cards Hover over the cards. 01. Normal 02. Reverse 03. Normal *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { --background-color: hsl(180, 20%, 90%); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; min-height: 100vh; padding: 2..
![](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/k3rzl/btrFHF2sejR/kxfJ1mk658oaPbfzRT9rV0/img.jpg)
Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More Code Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More Launch Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More body{ margin: 0; padding:..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYd9Fq/btrE6xkzlcQ/jJA1cdkLcuzZf48GETkYK1/img.jpg)
Someone Famous Hero I'm IRONMAN * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .card { position: relative; width: 350px; height: 85px; background-color: #F00; border-radius: 20px; filter: drop-shadow(-20px 20px 40px #398CC055); transition: .5s ease-in-out; } .card.active { height: 420px; } .card.active..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dDHV5Q/btrAUlutIIW/jkzRrzzavSQ2L4jEk6Exp1/img.jpg)
.card { width: 150px; height: 200px; position: relative; } .card_inner { width: inherit; height: inherit; background-color: rgba(255, 255, 255, .05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); border-radius: 8px; } .circle { width: 100px; height: 100px; background: radial-gradient(#b0e633, #53ef7d); border-radius: 50%; position: absolute; animation: move-up 2s ease-in..