WHAT Frontenc Mentor?
https://www.frontendmentor.io/challenges?sort=difficulty%7Casc
CHALLENGE TITLE : NFT Preview Card Component
FOCUS ON
This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.
HTML과 CSS를 갓시작한 사람에게 좋을 거라고 하는 군요.
WHAT TO DO?
- 작업 전반적으로는 쉽다고 느꼈으나, 메인 커버 이미지 hover 효과 접근을 너무 어렵게 시작했다.
처음으로 했던 생각
<hover-cover-image>
<색상 > </>
<눈 아이콘></>
</>눈 아이콘과 배경 색상을 구분 지어서 hover에 효과를 주려고 하니, 눈과 배경 색상이 따로 놀았다. ㅂㄷㅂㄷ
색상은 투명도가 있었고, 눈 아이콘은 없었기 때문에 분리했었던 것인데
-> rgb를 활용하면 색상 자체에 투명도를 줄 수 있다는 기본 개념이 (처음 CSS 배울 때 배웠었음) 갑자기 생각나서 그걸로 해결을 했다. (떠올린 나 자신 칭찬..해도 되겠지..?)
- 작업 시간은 1시간 30분 조금 안걸렸다.
완성본
https://stalwart-begonia-136bde.netlify.app
목표 설정
- 조금...난이도를 높여보는 것도 괜찮을 것 같다.
- 단순 구현은 그래도 편안하게 해서, 내가 많이 안해보고 어색한 그리드를 다음 목표로 잡고 챌린지를 골라봐야겠다.
