리액트2 [React]: router 화면 전환 시 스크롤 새로고침 router와 Link를 통해서 화면을 전환할 때 이전에 내린 스크롤이 그대로 유지되는 문제점이 있었다. 이러한 문제점을 해결하기 위해 useLocation과 window.scrollTo를 사용해서 화면을 전환할 때마다 스크롤이 초기화 되면서 맨 위의 화면을 나타나게 코드를 수정했다. 모든 routes는 App.js에서 구동되기 때문에 스크롤 새로고침 코드도 App.js에 작성해야 한다. import './App.css';import Main from './components/Main';import { BrowserRouter as Router, Routes, Route, useLocation} from 'react-router-dom';import ProjectPage from './componen.. 2024. 7. 9. 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. 이전 1 다음
