🎞️ @media, @supports, @keyframes 등 CSS at-rule 종합 정리

🎞️ @media, @supports, @keyframes 등 CSS at-rule 종합 정리

CSS at-rule은 @로 시작하는 특수한 지시문으로, 조건부 스타일 처리, 기능 지원 확인, 애니메이션 정의 등 고급 스타일링에 사용됩니다. 이 글에서는 가장 많이 쓰이는 at-rule 3가지를 중심으로 설명합니다.

---

1️⃣ @media – 반응형 조건 처리

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

• 브라우저 화면 크기, 기기 조건에 따라 다른 스타일을 적용
• min-width, max-width, orientation 등이 자주 사용됨

---

2️⃣ @supports – 브라우저 기능 지원 여부 검사

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

• 특정 CSS 기능이 브라우저에서 지원되는 경우만 스타일 적용
• not, or, and 등을 사용해 복합 조건 설정 가능

예:

@supports (display: grid) and (gap: 1rem) {
  .grid {
    gap: 1rem;
  }
}

---

3️⃣ @keyframes – 애니메이션 정의

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

animation 속성과 함께 사용되어 단계적 애니메이션 효과를 구현합니다.

애니메이션 적용 예:

.box {
  animation: fadeIn 0.8s ease-in-out;
}

---

4️⃣ 기타 at-rule 종류

지시문	용도
@import	외부 CSS 파일 불러오기
@font-face	웹폰트 등록
@layer	스타일 레이어 우선순위 지정 (CSS Cascade Layer)
@page	프린트 전용 페이지 스타일링

---

5️⃣ 실전에서 자주 쓰이는 조합

✅ @media + @supports

@media (min-width: 1024px) {
  @supports (display: grid) {
    .layout {
      display: grid;
    }
  }
}

👉 특정 뷰포트 조건 + 기능 지원 여부를 동시에 검사

---

📌 요약 정리

• @media: 반응형 웹 구현의 핵심
• @supports: 기능 지원 여부에 따라 대체 스타일 제공
• @keyframes: 복잡한 애니메이션 구성
• @import, @font-face 등은 CSS 초기 구성에서 자주 사용

---

📌 다음 글 예고

다음 글: “CSS 파일 구조 설계 – reset, base, layout, components 분리하기”에서는 유지보수 가능한 CSS 아키텍처 구조를 설계하는 방법을 소개합니다.