[CSS ] 13. HTML + CSS 미니 페이지 예제

[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는 화면에 보이는 구성을 담당한다.
• 작은 페이지 단위로 만들면 레이아웃 감이 빨리 잡힌다.