이미지
반응형 웹 디자인 예제
창 크기를 조절하여 레이아웃 변화를 확인하세요.
1. 현재 뷰포트 크기
2. 반응형 그리드
1
2
3
4
5
6
3. 반응형 카드 레이아웃
4. 반응형 타이포그래피
반응형 제목
이 텍스트의 크기는 뷰포트 너비에 따라 자동으로 조절됩니다.
clamp() 함수를 사용하면 최소값, 선호값, 최대값을 설정할 수 있습니다.
5. 반응형 이미지
max-width: 100%로 컨테이너에 맞게 조절됩니다.
6. 반응형 테이블
| 이름 | 이메일 | 전화번호 | 주소 | 가입일 |
|---|---|---|---|---|
| 홍길동 | hong@example.com | 010-1234-5678 | 서울시 강남구 | 2024-01-15 |
| 김철수 | kim@example.com | 010-2345-6789 | 서울시 서초구 | 2024-01-20 |
| 이영희 | lee@example.com | 010-3456-7890 | 서울시 송파구 | 2024-02-01 |
7. 반응형 폼
8. 미디어 쿼리 예제 코드
/* Mobile First 접근법 */
/* 기본 (모바일) 스타일 */
.container {
padding: 10px;
}
/* 태블릿 (576px 이상) */
@media (min-width: 576px) {
.container {
padding: 20px;
}
}
/* 작은 데스크탑 (768px 이상) */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* 데스크탑 (992px 이상) */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* 큰 화면 (1200px 이상) */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}