반응형 웹 디자인

뷰포트 메타 태그, @media 쿼리, Mobile-First 접근, rem/em/vw 단위, 그리고 clamp()로 단계 없이 부드럽게 변하는 유동 크기를 익힙니다.

CSS반응형media query

소요 시간

⏱ 30~60분

난이도

📊 초보~중급

선수 조건

🎯 css-06

결과물

모바일·태블릿·PC 모두 자연스러운 페이지

이 강의에서 배우는 것

1viewport 메타 태그의 역할을 안다
2@media (min-width: ...) 쿼리를 작성한다
3Mobile-First 방식으로 스타일을 점진적으로 확장한다
4px·%·em·rem·vw·vh를 적재적소에 쓴다
5clamp()로 부드러운 유동 크기를 만든다

1. viewport 메타 태그

html

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

이 태그 없이는 @media 쿼리가 제대로 동작하지 않습니다.

2. @media 쿼리

css

/* 기본: 모바일 */
.container { padding: 16px; font-size: 14px; }

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
  .container { padding: 24px; font-size: 16px; }
}

/* PC (1024px 이상) */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

3. Mobile-First (권장)

css

/* 기본 = 모바일 */
.cards { display: block; }

/* 태블릿 */
@media (min-width: 768px) {
  .cards { display: flex; flex-wrap: wrap; }
}

/* PC */
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

💡

Mobile-First가 성능과 접근성 면에서 권장됩니다.

4. 주요 Breakpoint

이름	너비	대상
소형	~ 480px	작은 스마트폰
모바일	480px ~ 768px	일반 스마트폰
태블릿	768px ~ 1024px	태블릿
데스크탑	1024px ~	PC

5. 반응형 단위

단위	설명	예시
px	고정 픽셀	font-size: 16px
%	부모 기준 비율	width: 50%
em	현재 요소 font-size 기준	padding: 1.5em
rem	루트 font-size 기준	font-size: 1rem
vw	뷰포트 너비 %	width: 100vw
vh	뷰포트 높이 %	height: 100vh

css

html { font-size: 16px; }
h1 { font-size: 2rem; }   /* 32px */
p  { font-size: 1rem; }   /* 16px */

6. clamp() — 유동 크기

css

h1 {
  /* 최소 1.5rem, 이상적인 5vw, 최대 3rem */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.container {
  width: clamp(300px, 90%, 1200px);
}

clamp(최솟값, 이상적값, 최댓값)으로 단계 없이 부드럽게 변하는 크기를 만들 수 있습니다.

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗