[CSS ] 14. 미니 페이지 반응형 템플릿

[CSS ] 14. 미니 페이지 반응형 템플릿

---

이 글은 미니 페이지 예제를 기반으로 화면 크기에 따라 레이아웃이 변경되는 반응형 템플릿을 정리한 글이다.

CSS Media Query를 사용하여 데스크톱과 작은 화면에서 구성이 어떻게 달라지는지를 확인한다.

---

1. 예제에서 확인할 항목

• 전체 페이지 레이아웃 구조
• Grid / Flex 기반 배치
• 화면 크기에 따른 카드 배치 변화
• 메뉴 영역 반응형 처리

---

2. 반응형 구성 개요

• 넓은 화면 : 카드 영역 다열 배치
• 중간 화면 : 카드 영역 2열 배치
• 작은 화면 : 카드 영역 1열 배치

---

3. 미니 페이지 반응형 예제 실행 화면

아래는 CodePen 결과 화면이다. 브라우저 너비를 줄이거나 늘려 레이아웃 변화를 직접 확인할 수 있다.

---

4. 정리

• 반응형은 하나의 HTML 구조를 기준으로 CSS에서 제어한다.
• Media Query는 화면 크기에 따라 스타일을 분기한다.
• 작은 템플릿으로 반복 연습하면 반응형 감각을 익히기 좋다.