분류 전체보기21 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. [백준] 2563번: 색종이 -JS 문제가로, 세로의 크기가 각각 100인 정사각형 모양의 흰색 도화지가 있다. 이 도화지 위에 가로, 세로의 크기가 각각 10인 정사각형 모양의 검은색 색종이를 색종이의 변과 도화지의 변이 평행하도록 붙인다. 이러한 방식으로 색종이를 한 장 또는 여러 장 붙인 후 색종이가 붙은 검은 영역의 넓이를 구하는 프로그램을 작성하시오.예를 들어 흰색 도화지 위에 세 장의 검은색 색종이를 그림과 같은 모양으로 붙였다면 검은색 영역의 넓이는 260이 된다.입력첫째 줄에 색종이의 수가 주어진다. 이어 둘째 줄부터 한 줄에 하나씩 색종이를 붙인 위치가 주어진다. 색종이를 붙인 위치는 두 개의 자연수로 주어지는데 첫 번째 자연수는 색종이의 왼쪽 변과 도화지의 왼쪽 변 사이의 거리이고, 두 번째 자연수는 색종이의 아래쪽 변과.. 2024. 7. 3. 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 3 4 5 6 다음
