CSS 예제 18 / 20
아래 미리보기 크기 버튼으로 화면 폭을 바꿔가며, CSS의 @media 규칙이 특정 폭에서 어떻게 레이아웃을 바꾸는지 직접 확인해보세요.
@media
반응형
breakpoint
미리보기 크기:
💡 이렇게 바꿔보세요
- '태블릿 420px' 버튼을 눌러보세요 — 카드 색이 노란색으로 바뀌며 2칸이 돼요 (481~600px 규칙엔 안 걸리니 CSS 값을 직접 바꿔보세요)
max-width 는 '그 값 이하일 때', min-width 는 '그 값 이상일 때' 적용돼요- 실무에서는 보통 '작은 화면 우선(mobile-first)'으로
min-width 를 기본으로 쌓아올리는 방식을 많이 써요
← CSS 예제 목록