**반응형 웹 디자인(Responsive Web Design, RWD)**이란 접속하는 기기(PC, 태블릿, 스마트폰)의 화면 크기에 맞춰 웹 레이아웃이 유연하게 반응하여 최적의 화면을 보여주는 설계 방식입니다.
1. 반응형 웹의 1단계 필수 설정: 뷰포트 (Viewport)
모바일 브라우저가 화면을 임의로 축소해 보여주지 않도록 <head> 안에 뷰포트 메타 태그를 반드시 작성해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: 페이지 너비를 기기의 실제 화면 너비와 동일하게 맞춤.initial-scale=1.0: 처음 로딩 시 확대/축소 없이 100% 배율로 설정.
2. 미디어 쿼리 (Media Query, @media)
화면 너비(Width) 조건에 따라 서로 다른 CSS 스타일 규칙을 적용합니다.
/* 기본 PC 스타일 */
.container {
display: flex;
flex-direction: row;
}
/* 태블릿 & 모바일 화면 (너비 768px 이하일 때 적용) */
@media (max-width: 768px) {
.container {
flex-direction: column; /* 세로 배치로 전환 */
}
.main-nav {
display: none; /* 모바일에서는 내비게이션 일단 숨김 */
}
}
3. 모바일 퍼스트(Mobile-First) 전략
작은 모바일 화면 스타일을 기본으로 먼저 작성하고, 미디어 쿼리 @media (min-width: 768px) 형태로 화면이 커질수록 레이아웃을 확장해 나가는 최신 웹 디자인 접근법입니다.
4. 자주 묻는 질문 (Q&A)
Q. 반응형 웹에서 이미지 크기가 화면 밖으로 넘치지 않게 하려면?
A. CSS에 img { max-width: 100%; height: auto; } 구문을 추가해 두면 이미지가 부모 요소의 너비보다 커지지 않고 비율을 유지하며 자동으로 축소됩니다.