반응형 웹 — 스마트폰부터 PC까지 모두 잘 보이게

스마트폰으로 보면 글자가 너무 작아요

예전 웹사이트를 스마트폰으로 열면 글자가 깨알처럼 작거나 가로 스크롤이 생기는 경험을 해봤을 겁니다. 현대 웹은 스마트폰, 태블릿, PC 등 다양한 화면 크기에서 모두 잘 보여야 합니다.

이것이 반응형 웹 디자인(Responsive Web Design) 입니다.

1단계: viewport 메타 태그

HTML <head> 에 반드시 들어가야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width: 페이지 너비를 기기 화면 너비에 맞춤
initial-scale=1.0: 초기 확대/축소 배율 1배

이 태그 없이는 모바일 브라우저가 데스크톱 화면 크기를 가정하고 렌더링합니다.

2단계: 미디어 쿼리 (Media Query)

특정 화면 너비 조건에 따라 다른 스타일을 적용합니다.

/* 기본 스타일 (모바일 우선) */
.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로 추가하는 방식입니다.

/* 모바일: 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);
  }
}

반응형 네비게이션

/* 모바일: 로고만 표시, 메뉴 숨김 */
.nav-menu {
  display: none;
}

.nav-mobile-btn {
  display: block;   /* 햄버거 버튼 표시 */
}

/* 데스크톱: 메뉴 표시, 햄버거 버튼 숨김 */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    gap: 24px;
  }

  .nav-mobile-btn {
    display: none;
  }
}

반응형 폰트 크기

/* 모바일 */
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()` — 유동적 폰트 크기

h1 {
  /* 최소 1.75rem, 최대 3rem, 뷰포트 너비에 따라 유동적 */
  font-size: clamp(1.75rem, 4vw, 3rem);
}

vw는 뷰포트 너비의 퍼센트입니다. 화면이 넓어질수록 폰트가 커지다가 최대값에서 멈춥니다.

반응형 이미지

img {
  max-width: 100%;   /* 부모 요소를 넘지 않음 */
  height: auto;      /* 비율 유지 */
}

이 두 줄만으로 이미지가 화면에 맞게 줄어듭니다.

실전 예시: 반응형 소개 페이지

* {
  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 애니메이션을 배웁니다.