[CSS ] 13. HTML + CSS 미니 페이지 예제
이 글은 HTML 구조와 CSS 스타일을 함께 적용한 간단한 미니 페이지 예제를 정리한 글이다.
페이지 구성은 header / main / footer 형태이며, CSS는 레이아웃(배치), 여백, 테두리, hover 반응을 포함한다.
1. 예제에서 확인할 항목
- 전체 레이아웃을 영역 단위로 나누는 방법
- header에서 로고/메뉴 배치
- main에서 카드 목록을 Grid로 배치
- 버튼 hover로 간단한 반응 추가
- 화면이 좁아질 때 카드 배치 변화
2. 페이지 구조
- header : 상단 영역(브랜드, 메뉴)
- main : 본문 영역(제목/설명 + 카드 목록)
- footer : 하단 정보 영역
3. 미니 페이지 예제 실행 화면
아래는 CodePen 결과 화면이다. 예제 화면이 잘리면 iframe height 값을 늘리면 된다.
4. 정리
- HTML은 영역을 나누고, CSS는 화면에 보이는 구성을 담당한다.
- 작은 페이지 단위로 만들면 레이아웃 감이 빨리 잡힌다.
'Computer Science > CSS' 카테고리의 다른 글
| [CSS ] 15. 미니 페이지 2종 (로그인 / 프로필) (0) | 2026.02.08 |
|---|---|
| [CSS ] 14. 미니 페이지 반응형 템플릿 (0) | 2026.02.08 |
| [CSS ] 12. Grid 레이아웃 예제 모음 (0) | 2026.02.08 |
| [CSS ] 11. Flexbox 예제 모음 (0) | 2026.02.08 |
| [CSS ] 10. 레이아웃 예제 모음 (0) | 2026.02.07 |