Project💻5 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. 02. main 화면: footer 고정 main 화면에는 어느 화면이던지 고정되어 있는 header(navbar), footer와 동아리 소개 내용(intro, about, study, photo, 을 담고있는 부분이 필요했다. 다른 부분은 무난히 코드를 쓸 수 있었지만 footer를 화면 맨 하단에 고정시키는 것과 동아리 소개 내용의 photo 부분에서 어려움이 있었다. 이번 글에서는 내가 어떻게 footer를 화면 맨 밑에 고정시킬 수 있었는지 설명할 것이다. import './App.css';import Main from './components/Main';import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import Nav from './navigati.. 2024. 7. 2. 이전 1 2 다음
