Day28

오늘 할 일

• 포인트 게임 페이지 mock up ✔️
• 메인페이지 mock up ✔️
• 페이지 벗어나는 팝업창 고민
• 푸터 팝업창 ✔️
• 마이페이지 등급 팝업창
• 마이페이지 배너 수정 ✔️

포인트 게임 페이지

카드 4개 중 하나를 선택하고, 버튼을 누르면 포인트가 차감되면서 넷 중 하나의 카드가 몇 포인트를 주는 카드인지 보여야 되는 작업을 했다.
하나의 카드만 선택해야 하기 때문에 라디오버튼을 사용했고, 라디오 버튼에 커스텀 스타일을 주었다.
어떻게 선택된 카드만 변경을 하게 할까 생각하다가 조건부 렌더링을 하나씩 주었다. 좀 비효율적인가?

메인페이지

백그라운드 이미지를 희미하게 주고 호버하면 선명해지면서 확대되는 효과를 넣고 싶었다.
생각대로 잘 안되서 포기해야하나 싶었을 때 linear로 투명도를 주면 된다는 글을 보게 되었다.
너무너무 잘 동작한다. 최고!
글씨도 흐려지지 않고 배경만 딱 흐리게 된다.
그리고 푸터에 프로젝트 참여자의 연락처 팝업까지 넣어서 메인페이지 마무리~...

디테일한 작업까지 할 시간은 부족했지만 정말 열심히 한 프로젝트였다 😭
공부도 정말 많이됐고 잘 마무리해서 뿌듯하다!

---

참고 사이트
CSS 라디오 버튼 스타일링 가이드
css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인
[CSS] 백그라운드 이미지 투명도 조절하는 간단한 방법
[css] 배경이미지 투명하게 - Background image opacity