CSS에서 @ 가 쓰이는 곳.....

[김종록]

CSS에서 **`@`는 선택자(selector)가 아닙니다.**
👉 **At-rule(앳 규칙)** 이라고 부르며, CSS의 **동작·환경·조건을 정의**할 때 사용합니다.

---

## ✅ @ 규칙(At-rule)이란?

* CSS 해석 방식이나 적용 조건을 지정
* 파일 최상단 또는 특정 블록 안에서 사용
* 항상 `@이름`으로 시작

---

## 🔹 대표적인 @ 규칙 종류

### 1️⃣ `@import‎` – CSS 파일 불러오기

```css
@import‎ url("common.css");
```

---

### 2️⃣ `@media` – 반응형(조건부 스타일)

```css
@media screen and (max-width: 768px) {
  body {
    background: lightgray;
  }
}
```

📌 화면 크기, 인쇄 여부 등에 따라 스타일 적용

---

### 3️⃣ `@font-face` – 웹폰트 정의

```css
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2');
}
```

---

### 4️⃣ `@keyframes` – 애니메이션 정의

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

```css
.box {
  animation: fadeIn 1s;
}
```

---

### 5️⃣ `@supports` – 기능 지원 여부 체크

```css
@supports (display: grid) {
  .container {
    display: grid;
  }
}
```

---

### 6️⃣ `@page` – 인쇄 스타일

```css
@page {
  margin: 1cm;
}
```

---

## ❌ 선택자(selector)와의 차이

| 구분   | 선택자                  | @ 규칙                |
| ---- | -------------------- | ------------------- |
| 역할   | **HTML 요소 선택**       | **CSS 동작 정의**       |
| 예    | `div`, `.box`, `#id` | `@media`, `@import‎` |
| @ 사용 | ❌                    | ⭕                   |

---

## 🧠 한 줄 요약

> **CSS에서 `@`는 선택자가 아니라 “환경·조건·규칙을 정의하는 앳 규칙(At-rule)”이다.**

---

원하시면
✔ `@media` 실전 반응형 예제
✔ 선택자 vs @규칙 구조 비교 그림
✔ 초보자가 헷갈리는 `@` 오해 정리

도 더 설명해 드릴게요 🙂