4주차｜반응형 기초 – 모바일과 데스크톱 화면 대응
웹사이트를 만드는 사람이라면 반드시 알아야 하는 개념이 있습니다.
바로 “반응형(Responsive)” 입니다.
요즘 방문자의 70% 이상은 스마트폰으로 웹을 봅니다.
그런데 데스크톱 화면만 기준으로 디자인하면 모바일에서는 글자가 잘리고, 버튼이 겹치고, 이미지가 화면을 뚫고 나오는 일이 생깁니다.
이번 강의에서는 CSS 반응형 디자인의 기본 원리부터 미디어 쿼리(Media Query) 사용법, 그리고 워드프레스 기기별 미리보기와 수정 방법까지 실전 중심으로 배워봅니다.
반응형 디자인이란?
반응형 웹 디자인(Responsive Web Design)은 화면 크기에 따라 레이아웃, 글자 크기, 이미지 비율을 자동 조정하는 기술입니다.
같은 HTML 구조를 유지하면서 CSS로 각 기기에 맞는 디자인을 보여주는 것이 핵심입니다.
| 기기 | 화면 크기 | 디자인 특징 |
|---|---|---|
| 데스크톱 | 1920px 이상 | 3열 카드형, 큰 폰트 |
| 태블릿 | 768~1024px | 2열 축소, 터치 버튼 확대 |
| 모바일 | 767px 이하 | 1열 세로형, 터치 최적화 |
이렇게 하면 하나의 웹사이트가 모든 기기에서 자연스럽게 보이게 됩니다.
뷰포트(Viewport) 설정
HTML의 <head>에 다음 한 줄이 꼭 필요합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 코드는 “화면 크기에 맞춰 콘텐츠를 자동으로 조정하라”는 의미입니다.
워드프레스는 대부분 자동으로 포함하지만 직접 코드를 다룰 때는 반드시 확인하세요.
미디어 쿼리(Media Query) 기본 구조
@media (조건) {
/* 조건이 참일 때 적용할 CSS */
}예를 들어 화면 폭이 768px 이하일 때 글자 크기를 줄이려면:
@media (max-width: 768px) {
body { font-size: 14px; }
}자주 쓰는 미디어 쿼리 패턴
| 구분 | 조건 | 적용 기기 |
|---|---|---|
| 모바일 | @media (max-width: 767px) |
아이폰, 갤럭시 |
| 태블릿 | @media (min-width: 768px) and (max-width: 1024px) |
아이패드 |
| 데스크톱 | @media (min-width: 1025px) |
노트북, PC |
/* 모바일 */
@media (max-width: 767px) { h1 { font-size: 20px; } }
/* 태블릿 */
@media (min-width: 768px) and (max-width: 1024px) { h1 { font-size: 28px; } }
/* 데스크톱 */
@media (min-width: 1025px) { h1 { font-size: 36px; } }실습 ① 반응형 카드 레이아웃 만들기
<div class="card-container">
<div class="card">카드 1</div>
<div class="card">카드 2</div>
<div class="card">카드 3</div>
</div>.card-container {
display: flex;
gap: 20px;
}
.card {
flex: 1;
background-color: #f1f5f9;
padding: 20px;
text-align: center;
border-radius: 8px;
}
@media (max-width: 767px) {
.card-container { flex-direction: column; }
}데스크톱에서는 3열, 모바일에서는 자동으로 세로형으로 정렬됩니다.
실습 ② 이미지 크기 자동 조정
img {
max-width: 100%;
height: auto;
display: block;
}이미지를 부모 영역을 넘지 않게 비율 유지한 채 조정합니다.
워드프레스 블록 이미지에는 기본 포함되지만, HTML 직접 삽입 시 꼭 추가하세요.
실습 ③ 폰트 크기 유동화
h1 {
font-size: clamp(24px, 4vw, 40px);
}화면 크기에 따라 자동으로 크기가 변하는 함수입니다.
clamp()는 최소, 가변, 최대 값을 순서대로 지정합니다.
워드프레스에서 반응형 확인하기
- 편집기 오른쪽 상단의 미리보기 아이콘 클릭
- 데스크톱 / 태블릿 / 모바일 아이콘 선택
- 각 화면 비율에 맞는 페이지를 미리 확인
자주 발생하는 반응형 문제와 해결법
| 문제 | 원인 | 해결 방법 |
|---|---|---|
| 이미지가 화면을 넘침 | max-width 없음 | img {max-width:100%;} |
| 글자가 너무 작음 | viewport 누락 | meta viewport 추가 |
| 버튼이 너무 작음 | 고정 px 지정 | min-height:44px;로 조정 |
| 가로 스크롤 발생 | overflow 문제 | body {overflow-x:hidden;} |
| 폰트 불균형 | vw 단위 과도 | clamp()나 em 단위 활용 |
실습 ④ 메뉴 숨기기 & 햄버거 메뉴 표시
.nav-menu { display:block; }
@media (max-width:767px) {
.nav-menu { display:none; }
.hamburger { display:block; }
}이 원리를 이용하면 플러그인이나 스크립트로 햄버거 메뉴를 구현할 수 있습니다.
이미지로 보는 반응형 구조 예시
강의 안내
- 다음 강의 👉 실전 워드프레스 디자인 튜닝 — 헤더·푸터 수정 가이드
- 이전 강의 👉 3주차: 워드프레스에서 원하는 요소 찾기 (개발자 도구 사용)
- 사전 강의 👉 워드프레스 CSS 알면 돈이 보인다
더 알아보기 (외부 링크)
- MDN – Using Media Queries
- W3Schools – Responsive Web Design Basics
- Google Web.dev – Responsive Design Fundamentals
요약: 오늘 배운 핵심 포인트
- 반응형 웹은 하나의 HTML로 여러 기기에 맞춰 디자인을 조정하는 기술이다.
meta viewport설정은 필수이다.@media쿼리로 기기별 스타일을 제어한다.max-width,clamp(),flex-direction등으로 크기 조절한다.- 워드프레스의 “기기별 미리보기”로 쉽게 테스트한다.
CSS의 기본적인 이해를 통해 수익 블로그 성공을 기원합니다!!!
About the Author
