CSS

[css] height 길이 늘렸을 때, 위쪽 방향으로 늘어나게 하기

문제 막대그래프(?)처럼 위쪽으로 늘어나는 사각형을 만들고자 했는데 height길이를 늘리면 아래 방향으로 늘어나서 위치를 맞추기 쉽지 않았다 (height길이가 props에 따라 달라지게 하는 것을 구현하고 있었음) 내가 체크한 개수만큼 그래프의 길이가 길어져야하기 때문에 기준이 아래쪽이 되어야했음 해결 transform: scaleY(-1); transform-origin: top; 요소의 가장자리를 기준으로 요소를 수직으로 뒤집어 방향을 바꾸면 heigth를 늘렸을때 위쪽으로 늘어나는 것을 확인할 수 있었다.

[css] cursor 변경

cursor를 내가 원하는 이미지로 변경하기 위해 아래 코드를 넣어줬다 이미지가 로드 되지 않을경우 뒤에 auto로 실행된다 cursor: url("/public/images/cur.png"), auto; ✔️ 이미지 적용이 안될 경우 이미지의 크기가 128px이하여야 적용이 가능하다고 하니까 이거 꼭 확인 ! 경로 확인 ! 나는 이미지 크기 때문에 적용이 안되었었다 😅 💭 만들어진 커서 이용 https://www.cursors-4u.com/cursor/2009/11/11/animated-hello-kitty-wink.html Animated Hello Kitty Wink Cursor Option #1 - Universal CSS/HTML Code This CSS/HTML Code of Animated ..

[css] Animate.css 사용

https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 사이트에서 다양한 애니메이션 효과를 미리 사용해보고 원하는 애니메이션을 내 프로젝트에 적용할 수 있다 ! 설치 npm install animate.css --save 적용 애니메이션 적용을 위한 js 파일에 import 'animate.cs..