안녕하세요! 😊 지난번에는 CSS Grid의 기본 개념과 활용법을 배웠어요.
[CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기!
안녕하세요! 😊 지난번에는 반응형 웹 디자인과 media query 활용법을 배웠어요.이제 우리는 다양한 기기에서 깨지지 않는 웹사이트를 만들 수 있어요!그런데 웹사이트를 디자인할 때 복잡한 레이
it-afternoon.tistory.com
오늘은 배운 내용을 바탕으로 실전 프로젝트를 진행해볼 거예요!
📌 목표
✔ grid를 활용해서 반응형 웹사이트 레이아웃을 구성
✔ media query를 적용해 모바일 & 데스크톱 대응
✔ grid-template-areas를 활용해 직관적인 배치 설정
자, 그럼 시작해볼까요? 🎨🚀
1️⃣ 프로젝트 개요: 반응형 웹사이트 만들기
우리는 다음과 같은 반응형 웹페이지를 만들 거예요.
📌 레이아웃 구성
- header(상단 네비게이션)
- sidebar(좌측 메뉴)
- main-content(본문)
- footer(하단 정보)
✅ PC 화면 (화면이 넓을 때)
------------------------
| Header |
------------------------
| Sidebar | Content |
------------------------
| Footer |
------------------------
✅ 모바일 화면 (화면이 좁을 때)
------------------------
| Header |
------------------------
| Content |
| Sidebar |
| Footer |
------------------------2️⃣ HTML 코드 작성
먼저, HTML 구조를 만들어요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹사이트 만들기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header class="header">Header</header>
<nav class="sidebar">Sidebar</nav>
<main class="main-content">Main Content</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>✅ 이제 HTML 뼈대를 완성했어요!
3️⃣ CSS Grid 적용하기 (데스크톱 화면 기준)
📌 PC 화면에서는 2열(sidebar + main-content) 구조를 유지할 거예요!
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Grid 컨테이너 설정 */
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 80px auto 60px;
height: 100vh;
}
/* 개별 영역 스타일 */
.header { grid-area: header; background: navy; color: white; padding: 20px; text-align: center; }
.sidebar { grid-area: sidebar; background: lightgray; padding: 20px; }
.main-content { grid-area: main; background: white; padding: 20px; }
.footer { grid-area: footer; background: darkgray; color: white; padding: 20px; text-align: center; }✅ 이제 PC 화면에서 깔끔한 grid 레이아웃이 적용됐어요!
4️⃣ media query를 활용한 모바일 반응형 적용
📌 모바일 화면에서는 sidebar가 아래로 이동하고 main-content가 단독으로 표시돼요.
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 80px auto auto 60px;
}
.sidebar {
background: lightblue; /* 모바일에서 배경색 변경 */
}
}✅ 이제 모바일에서도 자연스럽게 콘텐츠가 재배치돼요!
📌 최종 결과물 정리
✅ PC 화면
✔ header, sidebar, main-content, footer를 2열 레이아웃으로 배치
✔ sidebar가 왼쪽, main-content가 오른쪽
✅ 모바일 화면
✔ sidebar가 main-content 아래로 이동
✔ grid-template-areas를 사용해 가독성을 높이고 유지보수를 쉽게 함
📌 마무리 & 다음 단계는?
오늘은 CSS Grid를 활용한 실전 프로젝트를 진행했어요!
✅ 반응형 웹사이트 레이아웃을 grid로 구성
✅ grid-template-areas를 활용해 레이아웃을 직관적으로 배치
✅ media query를 적용해 모바일 & 태블릿 대응
📢 다음 글에서는?
👉 CSS 애니메이션(@keyframes) 배우기! 부드러운 효과 추가하기
👉 실제 프로젝트! 애니메이션 효과가 있는 웹사이트 만들기
다음 글도 기대해주세요! 😊
[CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기!
안녕하세요! 😊 지난번에는 CSS Grid를 활용해 반응형 웹사이트를 만드는 방법을 배웠어요.이제 레이아웃을 잘 만들 수 있지만, 웹사이트를 더 생동감 있게 만들려면?바로 애니메이션(Animation) 효
it-afternoon.tistory.com
'개발 공부 > 기타' 카테고리의 다른 글
| [CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기 (1) | 2025.03.27 |
|---|---|
| [CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기! (1) | 2025.03.26 |
| [CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기! (0) | 2025.03.24 |
| [반응형 웹 디자인] media query 활용법 & 모바일 대응 완벽 가이드! (0) | 2025.03.21 |
| [HTML과 CSS 레이아웃 완전 정복] display, position, flexbox 활용법 총정리! (0) | 2025.03.20 |