일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- SWIFT
- CSS
- MAC
- jQuery
- hover
- HTML
- ipad
- xcode
- IOS
- css3
- 프론트엔드
- html5
- javascript
- react
- Animation
- image
- keyframes
- effect
- 개발자
- 자바스크립트
- front-end
- 풀스택
- 비전공자
- iOS 개발자
- 백엔드
- iPhone
- 비전공 개발자
- php
- 애니메이션
- button
- Today
- Total
목록Javascript (176)
비전공자 개발일기
DATE CALCULATOR How many days are there between two dates? (Change a date to automatically calculate the difference) Start date End date Time elapsed: h1 { font-size: 2.5em; font-weight: 700; text-align: center; } header > p { text-align: center; font-size: 1.5rem; font-weight: 700; } div { text-align: center; border: .1em solid #000; } p { font-size: 1.4rem; font-weight: 700; } body { backgroun..
modal project open modal modal content @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hsl(205, 63%, 48%); /* primary/main color */ --..
* { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EFEFEF; } .container .date { font-size: 24px; font-weight: 500; } .container .date#printTime { color: #E74C3C; } .container .date#printDate { color: #2ECC71; margin: 0 20px; } .container .date#printDay { color: #9B59B6; } let date = ..
Download Downloading Open File Download Downloading Open File .button.dark-single { --background: none; --rectangle: #242836; --success: #4bc793; } .button.white-single { --background: none; --rectangle: #f5f9ff; --arrow: #275efe; --success: #275efe; --shadow: rgba(10, 22, 50, .1); } .button.dark { --background: #242836; --rectangle: #1c212e; --arrow: #f5f9ff; --text: #f5f9ff; --success: #2f3545..
Browser /* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#252930 50%, #675AFE 50%); } ::selection{ color: ..
DOWNLOAD FILES Please Wait.... If the download did't start automatically, CLICK here * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .download-container { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 .5rem; } .dow..
Height Converter Cm .container { width: 375px; height: 280px; margin: 65px 0 0 350px; background-color: #000; padding-left: 30px; color: #FFF; } h1 { padding: 25px 0 0 15px; } #cm{ width: 150px; height: 25px; margin: 30px 0 0 15px; } #result_alert { width: 100%; float: left; font-size: 35px; margin-top: 5px; text-align: center; color: #CC3333; } #result_feet, #result_inches { width: 50%; float: ..
Night/Day Mode Toggle Click on the moon in the upper-right corner to change to night mode Click again on the sun to change back to day mode body { transition: 1.5s; } .night-toggle { width: 33px; height: 33px; position: absolute; right: 20px; top: 20px; } .night-toggle:hover { cursor: pointer; } .moon { background-color: transparent; box-shadow: -6px 1px 0 3px #275E8E; border-left: 3px solid #27..