[Toy Projects] 상품 프리뷰 카드

Frontend Mentor - Product preview card component

 

Frontend Mentor에서 html과 css를 선택하면 가장 처음 나오는 challenge를 시도해봤다. 갓 기초문법을 땐 쪼렙이라 오래 걸리기도 했고, 코드도 전문가가 보기엔 엉망이겠지만 처음 해 본 프로젝트라 기쁜 마음으로 올려본다.

 

결과물 main page

사용스택 : html, css 

첫 시도 치고 거의 비슷하게 만든 것 같아 뿌듯하다. 사이즈가 조금 다르긴 한데 내려받은 이미지파일 속 컨텐츠 사이즈를 정확하게 알 수 있는 방법이 있는지 잘 모르겠다. (1/10 추가 : 사이즈를 정확하게 알기 위해서는 제공하는 경우에 한해  Sketch and Figma design files 를 내려받을 수 있다. 무료인 경우도 있고, fro를 구입해야 하는 경우도 있음.)

 

마우스 커서를 올리지 않은 상태(左)와 마우스 커서를 버튼에 올린 상태(右)의 동작(색 변화)

가장 구현에 고전했던... svg 아이콘과 submit 버튼을 하나의 버튼으로 작동하도록 만들고 hover 효과 주기...

 

이런 프로젝트를 진행할 때 중요한 것은 받은 파일의 구조를 관찰하고 어떻게 코드로 구현해낼건지를 고민하는 시간일 것이다. 이 프로젝트를 진행하는 동안 많이 고민했고, 나름의 답을 내었으니 충분한 보람이 있다고 생각한다. Frontend Mentor에 내 작업물을 커밋하면 피드백도 받을 수 있는 듯 하니 준비가 되면 올려봐야겠다.

 

github 주소 : https://github.com/AngryDoggaebi/FrontendMentor-Projects

 

 

 

---

프론트엔드 멘토에서는 프론트엔드를 공부하는 사람들이 다양한 프로젝트에 도전해 볼 수 있도록 단계별 아이디어와 디자인 가이드를 제공해준다. 디자인 파일과 아이디어를 보고 실제로 동작하도록 구현해보면 된다. 답안은 제공하지 않는다. 

Frontend Mentor 주소

https://www.frontendmentor.io/home