일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- hover
- effect
- HTML
- 비전공 개발자
- iOS 개발자
- 애니메이션
- html5
- keyframes
- IOS
- 풀스택
- Animation
- SWIFT
- front-end
- javascript
- ipad
- css3
- button
- 자바스크립트
- 백엔드
- php
- MAC
- 비전공자
- jQuery
- xcode
- 개발자
- iPhone
- CSS
- 프론트엔드
- react
- image
- Today
- Total
목록svg (5)
비전공자 개발일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bg3giA/btrZcindynO/2fZ10rZksZ2nwSpJXnqqCk/img.png)
body { background-color: #111; overflow: hidden; text-align:center; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg { width: 100%; height: 100%; visibility: hidden; cursor: pointer; } let select = (s) => document.querySelector(s), selectAll = (s) => document.querySelectorAll(s), mainSVG = select("#mainSVG"); gsap..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zu3N9/btrVF97JbOa/rNHTTSDhtdng4J4DBNaUF0/img.png)
* { margin: 0; padding: 0; box-sizing: border-box; position: relative ; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .circle { width: 600px; height: 600px; filter: url(#wavy) blur(1px); } .circle::before { content: ''; position: absolute; top: 100px; left: 100px; right: 100px; bottom: 100px; border: 20px solid #FFF; border-rad..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c9x6DF/btrTVhNqCr3/h9LqHyJo7YfAKyxn0jP6U1/img.png)
실제 동작 영상 * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .elastic { width: 400px; height: 400px; display: flex; justify-content: center; align-items: flex-end; } .elastic::before { content: ''; position: absolute; bottom: 62.5px; left: 5px; width: 15px; height..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/SyZnJ/btrBym6KmPN/6WRn0jStjrwhxwkR54N2nK/img.jpg)
SUBMIT body { background: #1d1f20; } main { width: 100vw; height: 100vh; } .button { background: #2b2d2f; width: 200px; height: 80px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; cursor: pointer; border-radius: 4px; } .text { font: bold 1.25rem/1 poppins; color: #71dfbe; position: absolute; top: 50%; transform: translateY(-52%)..
html SVG(Scalable Vector Graphics) xml 형식의 벡터 기반 그래픽을 정의하는 요소 svg는 확장 가능한 웹용 벡터 그래픽을 나타냄 svg는 xml 형식으로 그래픽을 정의 svg는 모든 요소와 속성에 에니메이션 정의 가능 ex) 경과 시간에 따른 스타일이 변화는 것 svg는 W3C(html을 표준화하는 곳)에서 권장하는 태그(요소) SVG 사각형 그리기 rect width: 도형의 너비 height: 도형의 높이 stroke: 테두리 색 stroke-width: 테두리 두께 fill: 도형의 배경색 opacity: 도형의 투명도 x: 사각형의 왼쪽 상단 x좌표 y: 사각형의 왼쪽 상단 y좌표 rx: 사각형 모서리 굴곡의 x축 반지름 ry: 사각형 모서리 굴곡의 y축 반지름 SV..