프론트엔드
Responsive Web Design반응형 웹 디자인
반응형 웹 디자인(Responsive Web Design, RWD)은 하나의 HTML로 다양한 화면 크기에 최적화된 레이아웃을 제공하는 웹 디자인 방법론이다. 2010년 Ethan Marcotte가 개념화했으며 미디어 쿼리, 유동 그리드, 유동 이미지가 핵심이다.
핵심 3요소
1. 유동 그리드: 고정 px 대신 % 또는 fr 단위
2. 유동 이미지: max-width: 100%
3. 미디어 쿼리: 화면 크기별 스타일 분기뷰포트 메타 태그
html
<!-- 필수: 모바일 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">미디어 쿼리
css
/* Mobile First 접근 (권장) */
/* 기본: 모바일 */
.container {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* 태블릿 (768px+) */
@media (min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
}
/* 데스크톱 (1024px+) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #fff; }
}
/* 터치 vs 포인터 */
@media (hover: hover) {
.button:hover { background: blue; }
}CSS Grid 반응형
css
/* auto-fill로 자동 열 계산 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* 복잡한 레이아웃 */
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"aside"
"footer";
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
}
}반응형 이미지
html
<!-- srcset으로 해상도별 이미지 -->
<img src="image-800.webp"
srcset="image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="반응형 이미지">
<!-- picture: 아트 디렉션 -->
<picture>
<source media="(max-width: 768px)" srcset="mobile.webp">
<source media="(min-width: 769px)" srcset="desktop.webp">
<img src="fallback.jpg" alt="이미지">
</picture>