하나의 HTML로 모바일·태블릿·PC 모든 화면에 딱 맞는 웹사이트 만들기.
viewport, 브레이크포인트, clamp()까지 인터랙티브 데모로 바로 익혀봐요.
하나의 HTML·CSS로 모든 화면 크기에 자동으로 대응하는 웹 디자인 방식
스마트폰으로 웹사이트를 열었는데 글씨가 너무 작아서 두 손가락으로 화면을 확대해본 경험, 있으신가요? 그 사이트는 반응형 디자인이 적용되지 않은 것이에요. 반응형 웹 디자인(Responsive Web Design, RWD)이란 화면 크기에 따라 레이아웃·폰트·이미지 크기가 자동으로 조정되는 웹 개발 방식이에요. 모바일용·PC용 사이트를 따로 만들지 않아도 단 하나의 HTML 파일로 모든 기기에서 최적의 경험을 제공할 수 있어요.
반응형 디자인의 핵심 도구는 CSS의 미디어 쿼리(Media Query)예요.
@media (min-width: 768px) { ... }처럼 화면 너비 조건을 걸어 특정 크기 이상일 때만
적용되는 스타일을 별도로 작성할 수 있어요. 이 기법을 활용하면 모바일에서는 1열 레이아웃,
태블릿에서는 2열, PC에서는 3열로 자동 전환되는 카드 그리드를 단 몇 줄의 CSS로 만들 수 있어요.
반응형 디자인의 첫걸음은 viewport 메타 태그예요.
모바일 브라우저는 기본적으로 화면을 980px짜리 가상 화면으로 처리한 뒤 축소해서 보여줘요.
그래서 반응형 CSS를 아무리 잘 짜도 이 태그가 없으면 모바일에서 데스크탑처럼 렌더링돼요.
<meta name="viewport" content="width=device-width, initial-scale=1.0">를
<head> 안에 반드시 넣어야 해요. 이 한 줄이 있어야 미디어 쿼리가 제대로 동작해요.
가장 작은 화면(모바일)을 기본 스타일로 작성하고, min-width로 큰 화면에 대한 스타일을 추가해요. 현재 업계 표준 방식이에요.
가장 큰 화면을 기본으로 작성하고, max-width로 좁은 화면에 대한 스타일을 덮어써요. 레거시 사이트에서 주로 볼 수 있어요.
고정 px 대신 %, vw, clamp() 등의 상대 단위를 사용해 브레이크포인트 없이도 자연스럽게 늘고 줄어드는 레이아웃이에요.
img { max-width: 100%; } 한 줄이면 이미지가 부모 너비를 절대 벗어나지 않아요. srcset으로 해상도별 이미지도 제공할 수 있어요.
모바일 퍼스트를 권장하는 이유가 뭔가요? 모바일 화면에서 콘텐츠의 우선순위를 먼저 결정하면, PC에서는 여유 공간에 부가 요소를 추가하는 식으로 접근하게 돼요. 성능 면에서도 모바일 기기는 불필요한 CSS를 파싱하는 부담이 적어지고, 구글 검색엔진도 모바일 버전을 기준으로 페이지를 평가해요(모바일 우선 인덱싱).
레이아웃이 전환되는 기준 너비 — 이 4가지만 기억하면 대부분의 반응형이 해결돼요
브레이크포인트는 기기가 아닌 콘텐츠 기준으로! 위 수치는 업계의 일반적인 관행이지만, 정답은 아니에요. 실제로는 "이 너비부터 레이아웃이 어색해 보인다"는 시점에 브레이크포인트를 추가하는 게 맞아요. 특정 기기를 타겟하기보다 콘텐츠가 무너지는 지점을 찾는 것이 핵심이에요.
이것만 알면 대부분의 반응형 레이아웃이 가능해요
특정 화면 조건에서만 적용될 스타일을 작성해요. 조건에는 너비·높이·방향·인쇄 여부 등을 쓸 수 있어요.
min-width는 "이 너비 이상일 때"(모바일 퍼스트), max-width는 "이 너비 이하일 때"(데스크탑 퍼스트) 스타일을 적용해요.
브레이크포인트 단위는 px이 더 직관적이에요. em은 사용자의 기본 폰트 크기(보통 16px)에 따라 달라지므로 계산이 필요해요.
최솟값·선호값·최댓값을 한 번에 지정해요. 브레이크포인트 없이도 화면 크기에 따라 부드럽게 변해요.
repeat(auto-fill, minmax(...))를 사용하면 미디어 쿼리 없이도 화면 크기에 따라 열 수가 자동으로 조정되는 그리드를 만들 수 있어요.
너비가 변해도 가로세로 비율을 고정해요. 썸네일, 동영상 컨테이너, 카드 이미지 영역에 유용해요.
실전에서 가장 자주 쓰는 반응형 코드를 모았어요
/* 모바일 기본 (모든 화면에 적용) */ .container { padding: 16px; } .card-grid { grid-template-columns: 1fr; } /* 태블릿 이상 (768px ~) */ @media (min-width: 768px) { .container { padding: 24px; } .card-grid { grid-template-columns: repeat(2, 1fr); } } /* 데스크탑 이상 (1024px ~) */ @media (min-width: 1024px) { .container { padding: 40px; max-width: 1200px; margin: 0 auto; } .card-grid { grid-template-columns: repeat(3, 1fr); } }
/* 최소 1.5rem, 최대 2.5rem, 그 사이는 뷰포트 너비의 4% */ h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); } /* 브레이크포인트 없이 부드럽게 늘고 줄어요 */ p { font-size: clamp(0.9rem, 2vw, 1.1rem); } /* 컨테이너 너비에도 적용 가능 */ .hero-img { width: clamp(280px, 60%, 640px); }
<!-- 화면 너비에 따라 적절한 해상도 이미지를 자동 선택 --> <img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" src="img-800.jpg" alt="반응형 이미지 예시" > <!-- 이미지가 부모 너비를 절대 넘지 않도록 (필수 1줄) --> img { max-width: 100%; height: auto; }
이미지가 화면 밖으로 튀어나오나요? img, video { max-width: 100%; height: auto; } 를 전역 CSS에 딱 한 줄 추가하면 모든 이미지와 동영상이 부모 너비를 절대 벗어나지 않아요. 반응형 웹의 가장 기초적인 설정이에요.
버튼을 클릭해 각 화면 크기에서 레이아웃이 어떻게 변하는지 확인해봐요
구체적인 조건을 주면 AI가 미디어 쿼리까지 완성도 높게 짜줘요
아래 프롬프트를 AI에게 그대로 붙여넣으면 완성도 높은 반응형 레이아웃을 바로 받을 수 있어요.
내 사이트를 반응형으로 만들어줘. - 모바일(~767px): 1열 레이아웃, 폰트 15px - 태블릿(768px~): 2열 레이아웃, 폰트 16px - 데스크탑(1024px~): 3열 레이아웃, 최대 너비 1200px 중앙 정렬 모바일 퍼스트 방식으로 작성해줘.
AI 반응형 작업 팁: AI에게 "반응형으로 만들어줘"만 하면 기준이 모호해요. ①어떤 브레이크포인트를 쓸지, ②각 단계에서 열 수가 몇 개인지, ③모바일 퍼스트인지 데스크탑 퍼스트인지를 명확히 적어주면 훨씬 정확한 코드가 나와요. 현재 HTML 구조도 함께 붙여넣으면 더욱 좋아요.
반응형 작업을 하다 보면 꼭 만나는 궁금증
<head> 태그 안에 아래 한 줄을 넣으면 돼요.<meta name="viewport" content="width=device-width, initial-scale=1.0">img { max-width: 100%; height: auto; }max-width: 100%는 이미지가 부모 컨테이너의 너비를 절대 넘지 않게 하고, height: auto는 원본 비율을 유지해줘요.
이 두 줄을 전역 CSS에 넣어두는 것이 반응형 웹의 기본 세팅이에요.
rem을, 특정 컴포넌트 내부에서 부모 기준 상대 크기를 원할 때는 em을 쓰는 게 일반적이에요.
자연스럽게 이어지는 주제들로 실력을 넓혀봐요