일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- iPhone
- 백엔드
- react
- button
- css3
- HTML
- jQuery
- CSS
- IOS
- effect
- iOS 개발자
- 자바스크립트
- Animation
- SWIFT
- 풀스택
- keyframes
- 프론트엔드
- 비전공자
- hover
- front-end
- xcode
- image
- MAC
- ipad
- 애니메이션
- php
- javascript
- 개발자
- html5
- 비전공 개발자
- Today
- Total
목록프론트엔드 (470)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nejge/btrWBidD1NY/DAcLRpYyCPpnBysbOX5ktK/img.png)
CSS Tabs Product Options Shipping Published Sweep + Slide Dog Toy 1 The Sweep + Slide is an indoor dog toy with a sleek base designed to glide across any floor. Not only does this toy stimulate your dog's natural chase instincts, but it also sweeps away floor dust and grime with a replaceable sweeper bottom cover. Tab 2 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ufI1H/btrWw6C0M17/jIpEv7vGYYXOjRSKe9KIiK/img.png)
Budget Value cannot be empty or negative Set Budget Expenses Values cannot be empty Check Amount Total Budget 0 Expenses 0 Balance 0 Expense List * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #F7F9FD; } .wrapper { width: 90%; font-size: 16px; max-width: 43.75em; margin: 1em auto; } .container { width: 100%; } .sub-container { wi..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cRG3hq/btrWdHdmIFe/4vwQNTfrkPU59PPgk4soKK/img.png)
.gallery { --s: 250px; /* the size */ display: grid; transform-style: preserve-3d; --_p: perspective(calc(2.5*var(--s))); animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5); } .gallery img { grid-area: 1/1; width: var(--s); aspect-ratio: 1; object-fit: cover; transform: var(--_t,) translateZ(calc(var(--s)/2)); } .gallery img:nth-child(2) {--_t: rotateX(-90deg)} .gallery img:nth-child(3) {--_t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dUdyLu/btrWhtY4vpB/3kak3jg1OVwmbh4EeJkH40/img.png)
Horizontal Shadow: Vertical Shadow: Blur Radius: Spread Radius: Shadow Color: Shadow Color Opacity: Inset Shadow: Copy * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #0075ff; } .container { background-color: #ffffff; padding: 30px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 80vmin; border-ra..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cOn2jS/btrWbE9fDqz/lVAbAyFe1T7ZYB9ijXREwk/img.png)
*, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: hsl(188deg 3% 83%); } :root { --container: 16rem; --height: 5.125rem; --ball: 4.25rem; } [type="checkbox"] { appearance: none; display: none; } .checkbox__container { transform: scale(1.2); display: grid..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rcXAn/btrWbjW0Vj1/vPu7FQk7F2aBH7NPo9w3y1/img.png)
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; background: rgb(238, 238, 238); } a#instagram { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; display: block; width: 144px; height: 144px; outline: none; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: ..
![](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/b5QdZh/btrV1gy3hJh/9Qe7euTREuctgkHajU6CPk/img.png)
html { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background: linear-gradient(45deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%); } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { display: grid; grid-template-columns: 28% 70%; grid-gap: 2%; background-color..