CSS문법업데이트 2026.10.30

@media · 반응형 조건

화면 조건에 맞을 때만 스타일을 적용합니다.

기본 문법

@media (max-width: 600px) { … }

.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .demo { grid-template-columns: 1fr; }
}

미리보기 너비가 600px 이하이면 한 열, 그보다 넓으면 두 열로 표시됩니다.