[CSS ] 16. 미니 페이지 3종 (상품 / 댓글 / 알림)

[CSS ] 16. 미니 페이지 3종 (상품 / 댓글 / 알림)

---

이 글은 실전에서 자주 사용하는 UI 구성 요소를 HTML과 CSS로 구현한 예제이다.

---

예제 구성

• 상품 카드: 이미지 + 정보 + 버튼
• 댓글: 프로필 + 내용 + 액션
• 알림: 리스트 형태 알림 UI

---

예제 실행 화면

---

정리

• Flex는 카드 내부 정렬에 유용하다.
• 리스트 UI는 padding과 border로 구분감을 준다.
• 반응형은 구조를 바꾸지 않고 방향만 전환해도 충분하다.