다양한 화면 크기와 디바이스에 최적화된 레이아웃을 구현하는 CSS 전략입니다.
반응형 디자인은 미디어 쿼리, clamp(), Container Query 등을 활용하여 viewport 크기에 따라 레이아웃을 조정합니다. 모바일 퍼스트 접근이 권장되며, 최신 CSS 기능을 통해 breakpoint 없이도 유동적인 디자인이 가능합니다.
슬라이더를 조절하거나 프리셋을 선택하여 뷰포트 크기에 따른 레이아웃 변화를 확인하세요.
실제 코드로 동작 원리를 확인하세요.
/* 모바일 퍼스트 접근 */
.container {
padding: 1rem;
}
/* 태블릿 이상 */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 720px;
margin: 0 auto;
}
}
/* 데스크톱 이상 */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
.sidebar {
display: block; /* 모바일에서 숨겨진 사이드바 표시 */
}
}vw, vh, %, rem 등 상대 단위 사용 3. CSS 함수 — clamp(), min(), max()로 유동적 값 설정 4. Container Query — 부모 컨테이너 크기 기반 반응형 (최신) 5. 반응형 이미지 — srcset, <picture> 태그 활용clamp(min, preferred, max)는 CSS 함수로, 최솟값과 최댓값 사이에서 선호 값을 사용합니다. 미디어 쿼리 없이 유동적 타이포그래피나 간격을 구현할 수 있습니다. Container Query는 viewport가 아닌 부모 컨테이너의 크기에 반응하는 기능입니다. container-type: inline-size로 컨테이너를 정의하고 @container 규칙으로 스타일을 적용합니다.min-width 미디어 쿼리로 확장합니다. 데스크톱 퍼스트는 기본 스타일을 데스크톱용으로 작성하고 max-width 미디어 쿼리로 축소합니다. 모바일 퍼스트가 권장되는 이유: 1. 모바일 사용자가 더 많음 2. 성능 최적화 (작은 화면에 불필요한 스타일 로드 방지) 3. 점진적 향상 원칙에 부합