[CSS ] 15. 미니 페이지 2종 (로그인 / 프로필)

[CSS ] 15. 미니 페이지 2종 (로그인 / 프로필)

---

이 글은 HTML 구조와 CSS 스타일을 이용해 간단한 카드형 미니 페이지 2종을 만든 예제이다.

예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 스타일과 충돌하지 않도록 구성하였다.

---

예제 구성

• 로그인 카드: 입력창 + 버튼 + hover
• 프로필 카드: 프로필 영역 + 통계 영역(Grid) + 버튼
• 반응형: 화면 크기에 따라 2열 → 1열로 변경

---

예제 실행 화면

---

정리

• 입력 요소는 width: 100%로 맞추면 정렬이 깔끔하다.
• Grid는 카드 내부(통계 영역) 구성에도 유용하다.
• 반응형은 Media Query로 열 개수를 조절하는 방식이 간단하다.
• 예제 화면이 잘리면 iframe height 값을 늘리면 된다.