[CSS ] 16. 미니 페이지 3종 (상품 / 댓글 / 알림)
이 글은 실전에서 자주 사용하는 UI 구성 요소를 HTML과 CSS로 구현한 예제이다.
예제 구성
- 상품 카드: 이미지 + 정보 + 버튼
- 댓글: 프로필 + 내용 + 액션
- 알림: 리스트 형태 알림 UI
예제 실행 화면
정리
- Flex는 카드 내부 정렬에 유용하다.
- 리스트 UI는 padding과 border로 구분감을 준다.
- 반응형은 구조를 바꾸지 않고 방향만 전환해도 충분하다.
'Computer Science > CSS' 카테고리의 다른 글
| [CSS ] 18. UI 예제 (탭 / 아코디언 / 페이지네이션) (0) | 2026.02.08 |
|---|---|
| [CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트) (0) | 2026.02.08 |
| [CSS ] 15. 미니 페이지 2종 (로그인 / 프로필) (0) | 2026.02.08 |
| [CSS ] 14. 미니 페이지 반응형 템플릿 (0) | 2026.02.08 |
| [CSS ] 13. HTML + CSS 미니 페이지 예제 (0) | 2026.02.08 |