토이프로젝트3 04. Study 화면 : 모달창 띄우기 study 화면에서는 1학기에 진행됐던 스터디 팀들을 텍스트로 나타내고, 해당 텍스트를 누르면 모달창을 띄워 설명하는 기능을 만들고 싶었다.사실 이번에 모달창이라는 개념을 처음 알게됐다. (많이 쓰이는 것이지만 지금 처음 알았다니....🫣)찾아보니 복잡하게 만든것들이 많았는데 처음이니까 간단하게 해보고싶었다. import React, { useEffect, useState } from 'react';import '../styles/studyPage.scss'import Key from '../assets/images/keyboard.PNG'import Java from '../contants/study45-1/Java';import Frontend from '../contants/study45-1/Fr.. 2024. 7. 5. 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 다음
