일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바스크립트
- front-end
- iPhone
- iOS 개발자
- javascript
- 개발자
- 비전공 개발자
- xcode
- CSS
- image
- IOS
- css3
- SWIFT
- HTML
- keyframes
- 프론트엔드
- hover
- MAC
- 백엔드
- ipad
- jQuery
- Animation
- react
- html5
- effect
- 풀스택
- php
- 애니메이션
- 비전공자
- button
- Today
- Total
목록Javascript (176)
비전공자 개발일기
Content Container Cillum laborum reprehenderit dolor tempor ullamco veniam in veniam mollit ex minim id anim dolore cillum. Slide 1 Slide 2 Slide 3 Slide 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute..
Key Mapping E Crash R Ride F Floor tom G Mid tom H High tom V B Kick J Snare I Hi-Hat Open K Hi-Hat Closed JavaScript Drum Kit J B V H G F E R I K @import url(https://fonts.googleapis.com/css?family=Handlee|Pacifico); html, body { padding: 0; margin: 0; background-color: #fff; } .main-wrapper { margin: 30px auto 0; width: 1080px; text-align: center; } .main-title { font-family: 'Pacifico', cursi..
html { background: #09131d; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; border: 7px solid #09131d; box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5), inset 4px 4px 10px rgba(0, 0, 0, 0.5), inset -4px -4px 10px rgba(67, 67, 67, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);..
Copy in Clipboard with JavaScript Write something and copy it into your clipboard by clicking in the button below. Copy in clipboardCopied /* Just to play with animations */ .copiedtext { position: absolute; left: 0; top: 0; right: 0; text-align: center; opacity: 0; transform: translateY(-1em); color: #000; transition: all .500s; } .copied .copiedtext { opacity: 1; transform: translateY(-2em); }..
JavaScript pairs Game Click any card to begin 00:00 /* Variabes */ /* Mixin's */ body { background: #82d2e5; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; height: 100%; color: #fff; text-align: center; } h1, h2 { font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 2.6em; text-transform: uppercase; } h3 { f..
Music Player @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"); * { outline: none; box-sizing: border-box; } body { background-image: linear-gradient( 0deg, rgba(247, 247, 247, 1) 23.8%, rgba(252, 221, 221, 1) 92% ); font-family: "Open Sans", sans-serif; margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direc..
Countdown to my birthday days Hours Minutes Seconds 🥳 🎉 🎂 /* general styling */ :root { --smaller: .75; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; margin: 0; } body { align-items: center; background-color: #ffd54f; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;..
#chart { max-width: 650px; margin: 35px auto; } var options = { chart: { height: 280, type: "area" }, dataLabels: { enabled: false }, series: [ { name: "Follower(Family)", data: [15, 25, 38, 55, 69, 83, 99] } ], fill: { type: "gradient", gradient: { shadeIntensity: 4, opacityFrom: 0.7, opacityTo: 0.9, stops: [0, 90, 100] } }, xaxis: { categories: [ "01 Jan", "02 Feb", "03 March", "04 April", "05..