1. 오늘의 학습 목표
학습 목표: 데스크톱, 태블릿, 모바일 등 다양한 기기의 화면 크기에 맞춰 웹 페이지의 레이아웃과 스타일이 자동으로 변경되도록 하는 반응형 웹 디자인의 개념을 이해합니다. CSS 미디어 쿼리(@media)를 사용하여 특정 조건(화면 너비 등)에 따라 다른 스타일을 적용하는 방법을 배웁니다.
핵심 요약: 반응형 디자인은 어떤 기기에서 접속하든 사용자에게 최적의 경험을 제공하기 위한 현대 웹 개발의 필수 기술입니다.
2. 핵심 개념 파헤치기
2.1. 반응형 웹 디자인(Responsive Web Design)이란?
반응형 웹 디자인은 하나의 HTML 코드를 유지하면서, 접속하는 기기의 화면 크기에 '반응'하여 CSS만으로 레이아웃을 유연하게 바꾸는 웹 디자인 접근 방식입니다. 예전처럼 모바일용, PC용 웹사이트를 따로 만들 필요 없이 하나의 소스 코드로 모든 환경에 대응할 수 있습니다.
2.2. 뷰포트(Viewport) 설정의 중요성
반응형 디자인을 시작하기 전에 반드시 HTML 문서의 <head> 태그 안에 뷰포트 메타 태그를 추가해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 태그는 브라우저에게 "이 페이지의 너비를 기기의 화면 너비에 맞추고, 초기 확대 배율은 1.0으로 설정해줘"라고 알려주는 역할을 합니다. 이 설정이 없으면 모바일 기기에서 PC 버전의 페이지를 그대로 축소해서 보여주기 때문에 글씨가 매우 작게 보입니다.
2.3. 미디어 쿼리(Media Queries)란?
미디어 쿼리는 반응형 디자인의 핵심 기술로, 특정 조건이 참일 경우에만 CSS 규칙을 적용하도록 만들어 주는데 가장 흔하게 사용되는 조건은 바로 화면의 너비입니다
기본 구문: @media 미디어_유형 and (조건) { /* 조건이 참일 때 적용될 CSS 규칙 */ }
자주 사용되는 조건 (Breakpoints):
- max-width: 화면의 최대 너비를 조건으로 합니다. "화면 너비가 OOOpx 이하일 때"라는 의미로, 주로 데스크톱 레이아웃을 먼저 만들고 화면이 작아질 때의 스타일을 정의하는 데 사용됩니다
- min-width: 화면의 최소 너비를 조건으로 합니다. "화면 너비가 OOOpx 이상일 때"라는 의미로, 모바일 레이아웃을 먼저 만들고 화면이 커질 때의 스타일을 정의하는 '모바일 우선(Mobile-First)' 방식에 사용됩니다.
3. 코드로 배우기
3.1. 구현 목표
Day 10에서 만들었던 CSS Grid 레이아웃을 태블릿과 모바일 화면 크기에 대응하도록 미디어 쿼리를 추가하여 수정합니다.
3.2. [1단계: 기본 HTML 및 데스크톱 CSS 준비]
Day 10의 코드를 그대로 사용합니다. 이 코드는 화면이 넓은 데스크톱 환경을 기준으로 합니다. 그리고 <head>에 뷰포트 메타 태그를 추가하는 것을 잊지 마세요.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
/* ... */
}
</style>
</head>
<body>
</body>
3.3. [2단계: 태블릿용 미디어 쿼리 추가]
화면 너비가 768px 이하일 때, 사이드바를 메인 콘텐츠 아래로 내리고, 전체적으로 2열 구조로 변경합니다.
<style>
/*... (기존 데스크톱 CSS) ...*/
/*태블릿 화면 (768px 이하)*/
@media (max-width: 768px) {
.grid-container {
/*4fr 1fr 비율의 두 개 열로 변경*/
grid-template-columns: 4fr 1fr;
}
.main {
/*1번 열 라인에서 시작해 모든 열을 차지*/
grid-column: 1 / -1;
}
.sidebar {
grid-column: 1 / -1; /*메인 콘텐츠와 같은 너비로 변경*/
}
}
</style>
3.4. [3단계: 모바일용 미디어 쿼리 추가]
화면 너비가 480px 이하로 더 작아지면, 모든 요소를 1열로 쌓아 수직으로 배치합니다.
<style>
/*... (기존 데스크톱 및 태블릿 CSS) ...*/
/*모바일 화면 (480px 이하)*/
@media (max-width: 480px) {
.grid-container {
/*하나의 열로 변경*/
grid-template-columns: 1fr;
}
/* 모든 아이템이 자동으로 1열을 차지하므로,
기존에 설정했던 grid-column 값을 초기화할 필요는 없지만,
명시적으로 초기화해주는 것이 더 안전할 수 있습니다 */
}
</style>4. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Layout</title>
<style>
body { margin: 20px; font-family: sans-serif; }
.grid-container {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 15px;
height: 90vh;
}
.grid-container > * {
background-color: lightskyblue; border-radius: 5px;
padding: 20px; text-align: center; font-size: 1.2em;
}
.header, .footer { grid-column: 1 / -1; }
.main { grid-column: 2 / 3; }
.sidebar { grid-column: 3 / 4; }
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 2fr 1fr;
}
.main { grid-column: 1 / 2; }
.sidebar { grid-column: 2 / 3; }
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
height: auto;
}
.header, .main, .sidebar, .footer {
grid-column: 1 / -1;
}
}
</style>
</head>
<body>
<div class="grid-container">
<header class="header">Header</header>
<main class="main">Main Content</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>'개발 > 웹 개발' 카테고리의 다른 글
| Day 13: JavaScript 함수와 제어문 (0) | 2024.08.12 |
|---|---|
| Day 12: JavaScript 데이터 타입과 변수 (1) | 2024.08.09 |
| Day 10: CSS Grid (0) | 2024.08.07 |
| Day 9: CSS Flexbox (1) | 2024.08.07 |
| Day 8: CSS 박스 모델과 레이아웃 기초 (0) | 2024.08.05 |
