[HTML/CSS] 상품 레이아웃과 애니메이션 구현하기

💡 실습 포인트!

• 제일 공을 많이 들였던 부분은 애니메이션 효과이다.
• 마우스 오버하는 경우 적당한 높이(이미지 높이의 60% 정도)의 가격이 적힌 반투명한 창이 올라오게끔 구현하는 것이었는데 position, transition, transform, opacity, overflow 과 같은 다양한 속성을 조합해서 만들 수 있었다.

---

💡 PC 화면

• PC용 레이아웃 자체를 구성하는 것은 엄청나게 어렵지는 않았다.
• 회색 박스를 position: absolute 속성을 활용하여 위치조정을 하고있었는데 margin collapse 현상 때문에 애를 먹었고, 해결하고 나니 회색박스와 아이콘이 들어있는 박스의 간격이 제대로 조절되지 않아서 시간이 한참 걸렸다.
• 다만, 태블릿이나 모바일에서 화면을 보았을 때 어색한 부분이 꽤 많아서 폰트 크기를 조정한다든지, 내용이 넘쳐흐르지 않게 배경사이즈를 조정한다든지 이런 디테일한 부분을 수정해야 하는 경우가 많았다.
• 개인적으로 좌우대칭을 맞추거나 작은 박스들의 라인이 전체적인 박스라인과 맞아떨어지게 해야한다든지 그런 부분을 되게 신경쓰는 타입(1px 의 어긋남 용서 못해...)이라 그런 부분이 힘들었다..
• 개인적으로 Font awesome 의 아이콘 기본 형태(마치 구형폰의 알림아이콘 같은..)를 css 를 통해 심플하면서도 좀 더 예쁜 아이콘으로 만드는 법을 알게되어 좋았다.

---

💡 태블릿 화면

• 태블릿 화면은 기존 PC 화면과 크게 다른 점은 없다.
• 글씨 크기를 알맞게 조절하고 아이콘의 배열만 기존 4 * 1 에서 2 * 2 로 바뀌었는데 media query 와 flex 속성을 적절히 이용하면 금방이다! 

---

💡 모바일 화면

• 태블릿 화면과 마찬가지로 아이콘을 세로로 1줄로 변경하고 가운데 정렬했다.
• 화면이 작은 만큼 글씨 크기나 여백 간격 등을 조금 조정했다.