일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- react
- html5
- 비전공자
- Animation
- javascript
- CSS
- 자바스크립트
- 애니메이션
- front-end
- 비전공 개발자
- ipad
- 개발자
- HTML
- button
- effect
- image
- iOS 개발자
- jQuery
- hover
- IOS
- css3
- 백엔드
- keyframes
- iPhone
- php
- MAC
- SWIFT
- 풀스택
- 프론트엔드
- xcode
- Today
- Total
목록image (11)
비전공자 개발일기
func uploadImage(image: UIImage) { let url = URL(string: "URL/imgUpload.php")! // 이미지를 JPEG 데이터로 변환 guard let imageData = image.jpegData(compressionQuality: 0.8) else { print("Failed to convert image to JPEG data") return } // URLRequest 생성 var request = URLRequest(url: url) request.httpMethod = "POST" // HTTP Body에 이미지 데이터 추가 let boundary = "Boundary-\(UUID().uuidString)" request.setValue("mult..

* { 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..

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; overflow: hidden; background-color: #FFF; } .container { display: flex; flex-wrap: wrap; transform-style: preserve-3d; perspective: 1000px; } .container .block { width: 5vw; height: 5vw; background: url('img.jpg'); background-size: cover; background-attachment: fixed; background-position: center; t..

FILTER GALLERY All Animals Lightning Desert body { margin: auto; background: orange; width: 353px; font-family: "Arial" } h2 { text-align: center; } ul { padding: 0; } ul.gallery li { display: inline-block; opacity: 1; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } label { curso..

Easy Image Editor Filters Brightness Saturation Inversion Grayscale Brighteness 100% Rotate & Flip Reset Filters Choose Image Save Image /* 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 { display: flex; padding: 10px; min-h..

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2F364F; } .box { width: 640px; height: 360px; display: flex; transform: rotate(-25deg) skew(25deg); transition: .5s; } .box:hover { transform: rotate(-25deg) skew(-25deg) translateY(-20px); } .box span { width: 25%; height: 100%; backgroun..

tap the image to flip :root { --duration: 500ms; --ease-in: cubic-bezier(0.85, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); --ease-in-out: ease-in-out; --image-current: url(https://images.unsplash.com/photo-1630847911146-edd8828abf14?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjQ0Ng&ixlib=rb-1.2.1&q=85); --image-next: url(https://images.unsplash.com/photo-1..

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; } ul { list-style-type: none; } li { display: inline-block; } input[type="checkbox"][id^="myCheckbox"] { display: none; } label { border: 1px solid #fff; padding: 10px; display: block; position: relative; margin: 10px; cursor: pointer..