반응형 분류 전체보기98 vertical card swiper 세로형 카드 스와이프 https://www.youtube.com/watch?v=B8-cTdaUuRQ현대카드 다이브 GitHub - JoniVR/VerticalCardSwiper: A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift. - JoniVR/VerticalCardSwipergithub.com 상단처럼 효과를 주고싶은데 저 링크는 앱에서 사용하는거 같아서스와이퍼 플러그인을 활용해본다. 1. 위 아래로 스와이프시 겹쳐서 수직 이동2. 오른쪽 왼쪽 .. 2024. 6. 14. 라운드 마스킹 border-radius 위아래형 이미지 아닌 css로만 왼쪽은 위 라운드 / 오른쪽은 아래 라운드로 있을때 어떻게 해야할까?이미지로 깔려면 100%?? 로해야하는데저 이미지가 계속 바뀌는 이미지라서 저렇게 통째로 자르면 안된다===>왼쪽은 그냥 일반적으로 보더레디어우스 사용해서 깔고 오른쪽은 저런모양으로 오른쪽에 깔면된다!! 신기방기 See the Pen round masking only css by uni (@agosto) on CodePen. 2024. 6. 13. 탭 접근성 javascript ## 접근성 aria-selected="true" 선택된 상태다 (aria-selected="false" 선택이 되지 않은상태다) aria-hidden="false" 보이는 상태다 (aria-hidden="true" 보이지 않는 상태다) role="tablist" 난 탭이라는 자식들을 가지고 있다 role="tab" 난 탭이라는 자식이다 aria-controls="tab-panel-1" 내가 탭일떄 선택되는 콘텐츠를 연결해준다 role="tabpanel" 나는 탭의 선택했을때 나오는 콘텐츠다 aria-labelledby="tab-1" aria-labelledby="탭1" 난 첫번째 탭의 내용을 가져오는 거다 하고 설명해주는 레이블 한글로 적어도 상관없다 이 요소가 뭔지 설명해주는 부분이다 ##javas.. 2024. 6. 13. react vite 비트 이미지 최적화 방법 원래는 이미지 불러올떄 이렇게 쓰는데 div> img src={"/emotion1.png"} /> img src={"/emotion1.png"} /> img src={"/emotion1.png"} /> img src={"/emotion1.png"} /> img src={"/emotion1.png"} /> div> vite 이미지를 최적화하기 위해서는 이렇게 불러와놓고 하단에 넣어주는 형식으로 해야하는데만약 이미지가 100개면 다 이런식으로 하면 너무 많을꺼 같아서 다른방법을 찾아보았다.import emotion1 from './assets/emotion1.png';import emotion2 from './assets/emotion2.. 2024. 6. 9. flex gap을 써서 간격 조절하는법 1. flex써서 %로 간격을 맞출경우 부모에게 gap을 줄 경우2. width: calc(33.333% - 13.4px);20px(gap) * 2(3개일때 2군데 여백) / 3열 => 40/3=13.333 (올림 해준다) See the Pen flex gap % by uni (@agosto) on CodePen. 2024. 6. 7. 깃 초기설정 깃 커밋할때 내이름 설정git config --global user.email "you@example.com" git config --global user.name "Your Name" 2024. 6. 3. 이전 1 ··· 10 11 12 13 14 15 16 17 다음 반응형
