https://kuromi-dev.tistory.com/609
순수 CSS로만 Sticky Scroll Cards 만들기
export default function StickyScroll() { return ( 스크롤을 해보겠슴다... 1 2 3 4 스크롤이 끝났습니다... );}
kuromi-dev.tistory.com
https://kuromi-dev.tistory.com/610
keyframes로 자동으로 움직이는 Carousel 만드는 법
const CustomerReviews = () => { return {reviewData.length > 0 && ( e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'paused'} onMouseLeave={(e) => e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState
kuromi-dev.tistory.com
https://kuromi-dev.tistory.com/611
Swiper를 사용해서, 슬라이드 만드는 법
Swiper를 먼저 받아야 한다.import React from 'react';import { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/css';import 'swiper/css/pagination';import { Pagination } from 'swiper/modules';export default function App() { return ( Slide 1 S
kuromi-dev.tistory.com
https://kuromi-dev.tistory.com/612
react-progress-bar로 프로그레스 바 만들기
https://www.npmjs.com/package/@ramonak/react-progress-bar Progress Bar React Component. Latest version: 5.3.0, last published: 5 months ago. Start using @ramonak/react-progress-bar in your project by running `npm i @ramonak/react-progress-bar`. There are 5
kuromi-dev.tistory.com
- 메인 페이지 만들기
- Footer 만들기
- 언어 변경 컴포넌트 만들기
- 기타등등 모바일 페이지를 미디어 쿼리로 만들기
- 구린 변수명, 구린 컴포넌트명 직관적이고 가독성좋게 변환하기
- 쿠키 동의 팝업 새로 만들기
- overflow가 hidden이 되면 하위 컴포넌트의 position sticky 속성이 해제된다는 걸 알게 되었다.
'업무 회고' 카테고리의 다른 글
| 파일을 다운로드하게 만드는 handler (1) | 2025.03.06 |
|---|---|
| inline CSS가 CSS 파일 속 CSS를 덮어버렸을 때 해결방법 (0) | 2025.03.05 |
| react-progress-bar로 프로그레스 바 만들기 (0) | 2025.03.04 |
| Swiper를 사용해서, 슬라이드 만드는 법 (0) | 2025.03.03 |
| keyframes로 자동으로 움직이는 Carousel 만드는 법 (0) | 2025.03.02 |
댓글