일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- react
- 비전공자
- 비전공 개발자
- ipad
- iOS 개발자
- jQuery
- IOS
- 자바스크립트
- hover
- CSS
- 백엔드
- Animation
- SWIFT
- iPhone
- front-end
- 프론트엔드
- effect
- MAC
- button
- css3
- 애니메이션
- 풀스택
- HTML
- php
- keyframes
- html5
- 개발자
- xcode
- image
- javascript
- Today
- Total
목록프론트엔드 (470)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/P9Guq/btrU8GfxRRA/ADkJo1NcH2XIw1DUkoKifK/img.png)
Happy New Year 2023 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; } .box { height: 200px; transform-style: preserve-3d; animation: animate 16s linear infinite; } @keyframes animate { 0% { transform: rotateX(-20deg) rotateY(360deg); } 100% { transform: rotateX(..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/uLdch/btrUYQXvKmw/2411FKOD1YXkOkUSi7WFCK/img.png)
Home Menu What's New Contact It's not just Coffee It's Starbucks Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, alias ex eligendi quaerat itaque facere sint aliquid, unde, aut temporibus libero amet minus ipsam maxime laborum officia magni rerum vel ratione fugiat adipisci veritatis. Learn More * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } section { widt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bF2bVk/btrU44fjoBH/6btKGInrbtDnokfcNK8vgk/img.png)
실행 영상 Copy Text Copy Text * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background-color: #bb2629; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { background-color: #ffffff; padding: 30px; border-radius: 10px; margin: 30px 0; } .container input { font-size: 18px; padding: 10px; bo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BV3pW/btrUZYsoQGM/N6gjCUQQPYYe9mDwleZED0/img.png)
Happy New Year 20223 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; } h2 { font-size: 4em; font-weight: 700; color: #404040; letter-spacing: .05em; text-align: center; } h2::before { content: ''; position: absolute; top: 33px; height: 4px; width: calc(100% - 13..
![](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/oIJvQ/btrUHRPKmJz/dNbzTEqofXKDwFS05Db6T1/img.png)
* { padding: 0; margin: 0; box-sizing: border-box; } .image-container { width: 30%; margin: 5% 0 0 5%; } img { max-width: 100%; } #overlay { display: none; background: url("https://i.postimg.cc/Y0hq1pvS/shoe-img.jpg"); position: absolute; width: 25%; height: 35%; margin-top: -30%; margin-left: 50%; border: 2px solid #555; z-index: 1000; background-repeat: no-repeat; } #mouse-overlay { cursor: zo..
![](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..