일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- keyframes
- HTML
- javascript
- hover
- 자바스크립트
- iOS 개발자
- button
- 비전공자
- 풀스택
- 애니메이션
- php
- css3
- IOS
- front-end
- 백엔드
- ipad
- react
- image
- CSS
- xcode
- SWIFT
- jQuery
- html5
- 개발자
- 비전공 개발자
- 프론트엔드
- effect
- MAC
- iPhone
- Animation
- Today
- Total
목록HTML _CSS (226)
비전공자 개발일기

Generate * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #202020; overflow: hidden; } .container { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } button { position: relative; z-index: 1; margin: 10px; border: none; outline: n..

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1D0035; min-height: 100vh; overflow: hidden; } section { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: perspective(700px); } .box { position: absolute; transform-style: preserve-3d; top: 125px; } .box .cube { positio..

Candle Animation @import url('https://fonts.googleapis.com/css?family=Sacramento'); body { background-color: #212121; font-family: 'Sacramento', cursive; } .container { height: 200px; width: 600px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .container .title { font-size: 5rem; color: rgba(255, 255, 255, 0.5); text-align: center; text-shadow: 0px 2px 1px orange, 0px 0p..
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..

Inbox Today Upcoming Important Meetings Trash Family Vacation Festival Concerts Today Tasks All Important Notes Links Dashboard Design Implementation Approved Create a userflow In Progress Application Implementation In Review Create a Dashboard Design In Progress Create a Web Application Design Approved Interactive Design In Review Upcoming Tasks Dashboard Design Implementation Waiting Create a ..

* { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; height: 100vh; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; } section i { position: relative; width: 60px; height: 60px; background-color: #222; } section i:nth-child(5n+1) { animation: animate 2s linear infinite, animateBG 5s li..

85% 90% 70% * { margin: 0; padding: 0; box-sizing: border-box; font-family: consolas; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #CFD1E1; } .container { display: flex; justify-content: center; align-items: center; gap: 80px 100px; flex-wrap: wrap; } .container .box { position: relative; width: 240px; height: 250px; display: flex; ju..

♥ /* Try clicking it quickly and slowly. Try long and short button presses. :^) */ /* Remove a::before from line 55 to remove text. */ *, *::before, *::after { box-sizing: border-box; font-family: "Poppins", sans-serif; } body, html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 0; ..