[Product Preview Card Component] 2 day ⭐

WHAT Frontenc Mentor?

https://www.frontendmentor.io/challenges?sort=difficulty%7Casc

---

CHALLENGE TITLE : Recipe page

FOCUS ON

This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects.

 

반응형 페이지를 만드는 데에 도움이 된다고 하네요.

 

 

프론트엔드를 추천해준 분에게 1차 완성본에 대한 피드백을 받아봤는데, 생각보다 내 코드에 수정할 부분이 많았다.

많은 걸 깨달았던 좋은 피드백 시간 👍

 

피드백에서 알 수 있었던 내용

• height 값을 임의로 지정하는 것은 나쁜 습관! ( 유연성을 해침 )
• 상속을 고려해서 불필요한 지정값들을 넣지 말 것! (기본값도 고려)
• flex 일때는 width 값을 지정해줘도, 내부의 크기에 따라서 유연하게 늘어나고 줄어듦
  • 원치 않을 때는 flex-shrink : 0; 을 통해서 막아주면 된다.
• mobile 이미지가 별도로 있었는데, 나는 pc 이미지로 모바일 반응형을 구현했다. (가이드 문서를 꼼꼼히 읽자)
• hover 효과를 주기 위해 똥꼬쇼를 했지만, transform : scale( )이라는 좋은 속성이 있었다.
• object-fit의 옵션들에 대한 확실한 이해 -- (cover과 contain의 차이)

 

WHAT TO DO? 

-  피드백을 통해 알게된 많은 부분을 수정해서 처음부터 다시 작업을 해봤다.

- 작업 시간은 2시간 정도 걸렸다.

https://chipper-pudding-8cbd66.netlify.app/

 

목표 설정

- 잘한 것 같다고 안일하게 기분 좋아하지 말고, 부족한 점이 있는지 스스로도 찾을 수 있도록 하자.

- 조금 더 나은 방법이 없는지 계속 자문하고 알아봐서 개선점을 찾자 !