스마트폰으로 보면 글자가 너무 작아요#
예전 웹사이트를 스마트폰으로 열면 글자가 깨알처럼 작거나 가로 스크롤이 생기는 경험을 해봤을 겁니다. 현대 웹은 스마트폰, 태블릿, PC 등 다양한 화면 크기에서 모두 잘 보여야 합니다.
이것이 반응형 웹 디자인(Responsive Web Design) 입니다.
1단계: viewport 메타 태그#
HTML <head> 에 반드시 들어가야 합니다.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0" />width=device-width: 페이지 너비를 기기 화면 너비에 맞춤initial-scale=1.0: 초기 확대/축소 배율 1배
이 태그 없이는 모바일 브라우저가 데스크톱 화면 크기를 가정하고 렌더링합니다.
2단계: 미디어 쿼리 (Media Query)#
특정 화면 너비 조건에 따라 다른 스타일을 적용합니다.
CSS
/* 기본 스타일 (모바일 우선) */
.container {
width: 100%;
padding: 0 16px;
}
/* 태블릿 이상 (768px~) */
@media (min-width: 768px) {
.container {
padding: 0 32px;
}
}
/* 데스크톱 이상 (1024px~) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
}자주 사용하는 브레이크포인트#
| 이름 | 너비 | 해당 기기 |
|---|---|---|
| 모바일 | ~767px | 스마트폰 |
| 태블릿 | 768px~1023px | 태블릿 |
| 데스크톱 | 1024px~ | 노트북, PC |
| 와이드 | 1280px~ | 큰 모니터 |
모바일 우선(Mobile First) 전략#
작은 화면용 스타일을 기본으로 쓰고, 큰 화면을 min-width로 추가하는 방식입니다.
CSS
/* 모바일: 1열 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
width: 100%; /* 모바일: 전체 너비 */
}
/* 태블릿: 2열 */
@media (min-width: 768px) {
.card {
width: calc(50% - 8px);
}
}
/* 데스크톱: 3열 */
@media (min-width: 1024px) {
.card {
width: calc(33.333% - 11px);
}
}반응형 네비게이션#
CSS
/* 모바일: 로고만 표시, 메뉴 숨김 */
.nav-menu {
display: none;
}
.nav-mobile-btn {
display: block; /* 햄버거 버튼 표시 */
}
/* 데스크톱: 메뉴 표시, 햄버거 버튼 숨김 */
@media (min-width: 768px) {
.nav-menu {
display: flex;
gap: 24px;
}
.nav-mobile-btn {
display: none;
}
}반응형 폰트 크기#
CSS
/* 모바일 */
h1 {
font-size: 1.75rem; /* 28px */
}
/* 태블릿 이상 */
@media (min-width: 768px) {
h1 {
font-size: 2.25rem; /* 36px */
}
}
/* 데스크톱 이상 */
@media (min-width: 1024px) {
h1 {
font-size: 3rem; /* 48px */
}
}clamp() — 유동적 폰트 크기#
CSS
h1 {
/* 최소 1.75rem, 최대 3rem, 뷰포트 너비에 따라 유동적 */
font-size: clamp(1.75rem, 4vw, 3rem);
}vw는 뷰포트 너비의 퍼센트입니다. 화면이 넓어질수록 폰트가 커지다가 최대값에서 멈춥니다.
반응형 이미지#
CSS
img {
max-width: 100%; /* 부모 요소를 넘지 않음 */
height: auto; /* 비율 유지 */
}이 두 줄만으로 이미지가 화면에 맞게 줄어듭니다.
실전 예시: 반응형 소개 페이지#
CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0;
}
/* === 헤더 === */
header {
background-color: #1a1a2e;
color: white;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* === 히어로 섹션 === */
.hero {
padding: 40px 16px;
text-align: center;
}
.hero h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
}
/* === 카드 그리드 === */
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
.card {
width: 100%;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
}
@media (min-width: 640px) {
.card {
width: calc(50% - 8px);
}
}
@media (min-width: 1024px) {
.cards {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
.card {
width: calc(33.333% - 11px);
}
.hero {
padding: 80px 24px;
}
}브라우저 개발자 도구로 테스트#
Chrome/Edge 기준:
- F12 키 → 개발자 도구 열기
- 상단 아이콘에서 기기 모드 클릭 (또는 Ctrl+Shift+M)
- 화면 위쪽 드롭다운에서 iPhone, iPad 등 선택
- 직접 폭을 드래그해서 레이아웃 변화 확인
직접 해보기 ✏️#
HTML 프로젝트 페이지에 반응형 스타일을 추가해 보세요.
<head>에 viewport 메타 태그 확인- 기본 스타일: 1열 레이아웃, 모바일용 여백
@media (min-width: 768px): 콘텐츠 너비 제한 + 가운데 정렬- 개발자 도구에서 iPhone 크기로 테스트
정리#
| 개념 | 내용 |
|---|---|
| viewport 메타 태그 | 모바일 화면 크기 맞춤 필수 설정 |
@media (min-width: ...) | 특정 너비 이상일 때 스타일 적용 |
| 모바일 우선 | 작은 화면 기본 + 큰 화면 추가 |
max-width: 100% | 이미지 반응형 처리 |
clamp() | 유동적 폰트 크기 |
다음 편에서는 페이지에 생동감을 주는 hover 효과와 transition 애니메이션을 배웁니다.
