일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- css3
- jQuery
- 개발자
- Animation
- iPhone
- 프론트엔드
- javascript
- CSS
- xcode
- php
- button
- 풀스택
- MAC
- IOS
- html5
- 비전공자
- iOS 개발자
- keyframes
- hover
- react
- HTML
- SWIFT
- effect
- ipad
- front-end
- 애니메이션
- 자바스크립트
- image
- 비전공 개발자
- 백엔드
- Today
- Total
목록Javascript (176)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/JLslJ/btrR4wTiYBF/bhKZjBzoJIn2tm8dIe2cy0/img.png)
Height Width Copy *{ padding: 0; margin: 0; box-sizing: border-box; outline: none; font-family: "Roboto Mono",monospace; font-weight: 400; color: #010120; } body{ background-color: #008dff; } .wrapper{ background-color: #ffffff; width: 45%; min-width: 550px; padding: 30px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 8px; } .output{ background-color: #..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dc5Jqm/btrRXbXia02/xLpyvtfdylKSXuG2eZf2e1/img.png)
Heads: 0 Tails: 0 Flip Coin Reset *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; } body{ height: 100%; background: linear-gradient( to right, #575ce5 50%, #f9fbfc 50% ) fixed; } .container{ background-color: #ffffff; width: 400px; padding: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; box-shadow: 15px 30px 35px rgba(0,0,0,0.1)..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zA237/btrRz09sKCi/9K6X4X4No3VrRFcN26xGK1/img.png)
RGB HEX *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins",sans-serif; } body{ width: 100%; background-color: #976efa; } .container{ background-color: #ffffff; width: 80vmin; min-width: 250px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; padding: 50px 10px; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bocckY/btrRi0bqRXe/gBXSGy174Ig6kue1MCnsC1/img.png)
Check *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ background-color: #b156fe; } .container{ width: 35%; min-width: 450px; background-color: #ffffff; padding: 50px 30px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; border-radius: 8px; box-shadow: 0 20px 25px rgba(0,0,0,0.18); } .container *{ font-family: "DM Sans", sans-serif; outline: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FArft/btrQ4Ws8boN/UnuB0owfVVkhVSBUhS8Vjk/img.png)
Celsius Fahrenheit *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; font-size: 18px; } body{ background-color: red; } .wrapper{ width: 450px; background-color: #ffffff; padding: 70px 40px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; box-shadow: 0 20px 25px rgba(0,0,0,0.25); border-radius: 8px; display: flex;..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/txHSe/btrQ2SXWMxA/JeE2ZpkE1qSWmT6EtikFSk/img.png)
I am thinking of a number between 1-100. Can you guess it? GUESS No. Of Guesses: 0 Guessed Numbers are: None *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; background: linear-gradient( to right, #7f53ac, #657ced ); } .container{ position: absolute; width: 50%; min-width: 580px; transform: translate(-50%,-50%); top: 50%; left: 50%; background-color: #f..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b25H4l/btrQ27teH5z/HpmuDWLUtkk7Z9TzijHIRK/img.png)
You can right click anywhere to change the background. Blue Orange Green This website is going to look better if you turn on the backdrop-filter property : -In the address bar, type "about:config". -Click on "Accept the risk and continue". -Type "backdrop-filter" in the search bar. -If it's written "false", double click on it to turn it on. This website is going to look better on Google Chrome, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ttd2a/btrQJ96sJCR/M9UIzpSzWhOeGsuo8vbHJK/img.png)
Spin Click On The Spin Button To Start * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(135deg, #c3a3f1, #6414e9); } .wrapper { width: 90%; max-width: 34.37em; max-height: 90vh; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 3em; border-radius:..