홈페이지2 03. About 화면: 글자 회전 about 페이지에는 동아리 소개 글과 운영진 카드를 넣었다. 화면을 만들고 보니 너무 심심해서 간단하게 애니메이션을 넣었다. 이렇게 있을 때 since, what 글자들만 360도 회전하고 싶었다. h2{ font-weight: 900; display: inline-block; animation: flip 8s infinite; } @keyframes flip{ 0%,100%{ transform: rotateY(0); } 50%{ transform: rotateY(360deg); }} keyframe을 rotateY로 360도 회전하게 했다. 그리고 h2가 회전 중심축을 기준으로 적절하게 위치와 크기를.. 2024. 7. 5. 02-1 main 화면: 사진 자동 슬라이드 main 화면에서 가장 시간을 많이 투자한 것이 사진 여러장을 자동으로 무한히 흘러가게 만드는 것이었다.손으로 직접 슬라이드 하지 않고 일정 속도로 자동 슬라이드가 되게 하고싶었는데 쉽지 않았다. 나와 같은 것을 만든 사람들이 있지도 않아서 혼자 힘으로 해보려고 했다. 찾아보니 화면에 한장 씩 보여주면서 무한히 슬라이드 하는 것은 setInterval()을 사용하는 것 같았는데, 나는 사진이 ppt 슬라이드 처럼 뚝뚝 끊기면서 넘어가는게 아니라 모든 사진들이 물 흐르듯이 무한히 흘러가는 것을 원했기 때문에 사용하지 않았다. import '../styles/photos.scss'import {Photo} from '../contants/SlidePhotos'import { useEffect, useSta.. 2024. 7. 5. 이전 1 다음