[Product Preview Card Component] 1 day ⭐

WHAT Frontenc Mentor?

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

---

CHALLENGE TITLE : Product Preview Card Component

FOCUS ON

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

 

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

 

 

WHAT TO DO? 

-  상품 이미지에 hover 시, 자연스럽게 확대되는 것을 추가해서 구현해봤다.

•   transition 을 처음 이용해봤는데, 제대로 이해하고 쓴 것 같지는 않지만 그래도 정상적으로 동작하게 만들었다는게 스스로 신기했다.
• 내가 transition이 필요한 속성은 height, margin-left, margin-top이어서 이렇게 적어주었다.

/** product-image-container property **/
.product-img {
  height: 45rem;
  object-fit: contain;
  transition: height 0.5s, margin-left 0.5s, transform 0.5s;

  @media screen and (max-width: 375px) {
    height: 55rem;
    object-position: -1.8rem -10rem;
    transition: height 0.5s, margin-left 0.5s, margin-top 0.5s, transform 0.5s;
  }
}

.product-img:hover {
  height: 55rem;
  object-fit: contain;
  margin-left: -17%;

  @media screen and (max-width: 375px) {
    margin-left: -5%;
    height: 60.15rem;
    margin-top: -10%;
  }
}

 

- 구현을 할 때 검색 엔진에 포함되었으면 하는 이미지의 경우에는 (상품 이미지) img 태그를 이용해서 넣어주었고, 그렇지 않은 경우 (장바구니 아이콘) div 태그에 background-image로 넣어주었다.

- 지난 주차에 만들었던 Recipe Page에서는 동일한  font 스타일들을 반복해서 적어주었던 것을 개선하고 싶었다.

• 나는 이를 개선하기 위한 방법으로 css에서 font 스타일 별로 클래스를 지정해두었다. 그리고 사용하고자 하는 html 태그의 클래스명 뒤에 정의한 font 스타일명을 붙여서 적어주었다.

<h1 class="product-name display">Gabrielle Essence Eau De Parfum</h1>

/** common property **/
/** fonts **/
.display {
  font-family: "Fraunces";
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.2rem;
}

/** tag **/
.product-name {
  color: var(--Gunmetal);
}

 

 

- 작업 소요 시간은 3시간 정도 걸렸다.

완성본

 

Product-Preview-Card-Component from Codingaring

 

목표 설정

- transition에 조금 더 익숙해지면 좋을 것 같다.

- 다음 프로젝트부터는 styled component를 활용해서 css 작업을 해보려고 한다.

• styled component로 transition을 넣는게 생각보다 어렵다고 하는데, 한 번 구현해보면서 느껴봐야겠다.