JavaScript/React19 d 2024. 3. 19. [React] 라이브러리 없이 자동 슬라이드 구현 ✨ 구현된 모습 새 프로젝트에서 배너를 만들게 되었는데 라이브러리 없이도 할 수 있을 것 같아서 간단하게 만들어 보았다! 일단 가볍게 시도해본거라서 무한 슬라이드까진 아니고, 마지막 배너라면 다시 처음으로 돌아가게끔 설계했다. 이게 문제점이 배너가 4개면 괜찮은데 배너가 2개뿐이거나 혹은 배너가 아주 많을 때는 돌아가는게 너무 어지러워서...😵💫 조만간 무한 슬라이드로 수정하지 않을까 싶다. 👩💻 전체 코드 CSS const BannerArea = styled.div` width: 100%; aspect-ratio: 5/2; // 종횡비 position: relative; margin-bottom: 2rem; `; const BannerList = styled.div` display: flex; po.. 2024. 1. 10. [React] input type date 아이콘 커스텀 ✨ 구현된 모습 CSS const SearchYM = styled.input` font-family: var(--font-Pretendard-Regular); font-size: 23px; font-weight: bold; border: 0px; &:focus { outline: none; } // 날짜 선택 아이콘 커스텀 &::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator { background: url("/image/icon_DateA.png") center center no-repeat; cursor: pointer; &:hover { background-color: #eeeeee; border-radius: 20px; } } `;.. 2023. 12. 27. [React] 자동 무한 롤링 슬라이드 구현 ✨ 구현된 모습 🙏 도움받은 블로그 React - 무한 롤링 슬라이드(배너) 구현하기 :: 개발 흔적 남기기 (tistory.com) [Javascript] 자동 롤링 배너를 만들어보자! (velog.io) 해당 애니메이션의 명칭이 맞는지 잘 모르겠으나, 구글링 해보니 몇몇분들이 해당 네임을 쓰고있어서 나도 그냥 자동 무한 롤링 슬라이드라고 부르기로 했다(ㅎㅎ) 원리는 간단했으나 @keyframes에 대한 이해가 아직은 부족해서 따라하는 것만으로도 벅차다ㅠ 나의 경우 원본 슬라이드와 복제 슬라이드를 아래 사진과 같이 배치하여 함께 돌아가도록 했다 !! CSS const Silde = styled.div` position: relative; opacity: 0.8; `; const MovieList = s.. 2023. 12. 25. 이전 1 2 3 4 5 다음
