일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- SWIFT
- 자바스크립트
- xcode
- html5
- hover
- 비전공 개발자
- IOS
- keyframes
- MAC
- image
- css3
- front-end
- 프론트엔드
- 애니메이션
- 비전공자
- 풀스택
- ipad
- CSS
- jQuery
- iPhone
- javascript
- 백엔드
- effect
- iOS 개발자
- 개발자
- button
- Animation
- HTML
- php
- react
- Today
- Total
목록javascript (248)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/FdPqb/btrVmf2YnxX/gbioxJDe9o2nd3qyfuZ0z1/img.png)
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: #BB2429; padding: 0 20px; } ::selection{ color: #fff; background: #BB2426; } .wrapper{ max-width: 450px; margin: 150px auto; } .wrapper .search-input{ background: #fff; width: 100%; bor..
![](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/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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/19Wqg/btrUvUSwN3K/gFpa5MPkD3tltRbNMU6my0/img.png)
실제 영상 Grid Width 00 Grid Height 00 Create Grid Clear Grid Erase Paint * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto Mono", monospace; } body { background-color: #f4c531; } .wrapper { background-color: #ffffff; width: 80vmin; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 40px 20px; border-radius: 8px; } label { display: block; } span..