[CSS ] 15. 미니 페이지 2종 (로그인 / 프로필)
이 글은 HTML 구조와 CSS 스타일을 이용해 간단한 카드형 미니 페이지 2종을 만든 예제이다.
예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.
예제 구성
- 로그인 카드: 입력창 + 버튼 + hover
- 프로필 카드: 프로필 영역 + 통계 영역(Grid) + 버튼
- 반응형: 화면 크기에 따라 2열 → 1열로 변경
예제 실행 화면
정리
- 입력 요소는 width: 100%로 맞추면 정렬이 깔끔하다.
- Grid는 카드 내부(통계 영역) 구성에도 유용하다.
- 반응형은 Media Query로 열 개수를 조절하는 방식이 간단하다.
- 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
'Computer Science > CSS' 카테고리의 다른 글
| [CSS ] 17. UI 예제 (모달 / 드롭다운 / 토스트) (0) | 2026.02.08 |
|---|---|
| [CSS ] 16. 미니 페이지 3종 (상품 / 댓글 / 알림) (0) | 2026.02.08 |
| [CSS ] 14. 미니 페이지 반응형 템플릿 (0) | 2026.02.08 |
| [CSS ] 13. HTML + CSS 미니 페이지 예제 (0) | 2026.02.08 |
| [CSS ] 12. Grid 레이아웃 예제 모음 (0) | 2026.02.08 |