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을 넣는게 생각보다 어렵다고 하는데, 한 번 구현해보면서 느껴봐야겠다.
'🔗 Frontend Mentor Pro > Product Preview Card Component' 카테고리의 다른 글
[Product Preview Card Component] 2 day ⭐ (0) | 2024.03.18 |
---|