카드3 [React/Next.js] 라이브러리 없이 구현하는 카드 조명 효과 라이브러리를 사용하지 않고 카드 조명 효과 구현 카드 광택을 구현하다가 원형 그라데이션으로 카드를 비추면 어떨까 라는 생각에 시도해본 카드 조명 구현하기! 어둡게 뒤덮은 레이아웃을 마우스로 비춰서 밝히는게 미묘하게 어려웠다. 내가 원하는 만큼 밝지 않거나, 마우스로 밝혀도 카드가 보이질 않거나, 선형 그라데이션 효과와 충돌나서 이상하게 동작하거나, 조명이라기보다 구멍난것처럼 보이거나... 시행착오가 참 많았다. 하루를 거의 꼬박 써서 구현하였다. 핵심 원리를 요약하자면, 마우스 위치에 따라 동적으로 css 설정: pc 뿐 아니라 다른 기기에도 사용할 수 있도록 포인트 이벤트를 사용하여 카드위에 위치한 마우스의 offset 위치를 이용하여 css로 설정한 선형 그라데이션의 위치를 backgroundPost.. 2023. 12. 31. [React/Next.js] 클릭 또는 몇 초 후에 카드 뒤집기 효과 (card flip) 몇 초 후에 자동으로 카드를 뒤집고 클릭시에도 카드를 뒤집는 효과이다 보통 이렇게 카드를 뒤집는 것을 card flip 이라고 하고, 검색으로 쉽게 구현이 가능한 효과다. 많은 사람들이 over 시 뒤집히도록 css로 hover 시 변화하도록 많이 구현하지만, 나는 hover가 아니라 클릭 시 뒤집히길 바라고, 클릭하지 않아도 몇 초 후에 자동으로 뒤집히게 구현해보고 싶었다. 핵심 원리를 요약하자면, CSS transition과 transform-style: preserve-3d;을 사용하여 카드 요소의 3D 회전 효과를 구현 React의 useState와 useEffect로 카드의 뒤집힘 상태(isFlipped)를 관리하고, 시간 간격이나 클릭 이벤트에 따라 상태를 변경 isFlipped 상태에 따라 .. 2023. 12. 31. [백준 11652/c++] 카드 백준 1302 번 문제의 베스트셀러와 같은 방법을 이용하여 풀었다 조건이 매우 큰 수이지만, -2^62 ~ 2^62 사이이므로 long long 타입의 -2^63 ~ 2^63-1 사이의 범위 이내이므로 따로 어렵게 생각할 필요없이 그대로 long long 타입으로 계산하면 되는 문제였다... 난 long long 범위 넘는 줄 알고 string 이용해서 풀려고 하다가 cmp 에서 머리 터졌지만ㅜㅜ 자료형의 중요성! 수가 크다고 바로 string 을 생각 말고 항상 수로 표현 가능한 자료형 범위인지 다시 생각해보고 문제를 풀자 + 100000 개의 카드이므로 집합 10만개를 0으로 초기화 후, 카드마다 그 수의 인덱스에 카운트++ 하는 방법도 있지만, 그럴 경우 10만개의 메모리를 할당, 차지해야하므로 메.. 2022. 7. 13. 이전 1 다음
