CSS `@` 규칙

Articles

CSS 소개

CSS `@` 규칙

이 글은 CSS @ 규칙에 대해 설명합니다.

@import와 @media 같은 @ 규칙의 사용법과 작성 방법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML

css-at-rule.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

CSS `@` 규칙

CSS @ 규칙(at-rules)은 스타일시트의 동작과 적용 조건을 제어하기 위해 사용되는 특별한 지시문입니다. 일반 CSS 속성과 달리, @ 규칙은 조건에 따라 스타일을 적용하거나 외부 리소스를 가져옵니다. 대표적인 @ 규칙으로는 @media, @import, @keyframes 등이 있습니다.

대표적인 `@` 규칙의 종류

`@import`

1@import url('styles.css');

@import는 다른 CSS 파일을 현재 스타일시트로 가져오는 데 사용됩니다. 이를 통해 외부 CSS 파일을 쉽게 재사용할 수 있습니다.

포인트:

@import는 스타일시트의 맨 처음에 작성해야 합니다.
성능에 영향을 미치기 때문에 대규모 프로젝트에서는 사용을 피하는 것이 좋습니다.

`@media`

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

@media는 미디어 쿼리를 사용하여 화면 너비, 해상도 등의 특정 조건에 따라 스타일을 적용합니다. 반응형 디자인을 구현할 때 자주 사용됩니다.

일반적으로 사용되는 조건

다음은 미디어 쿼리에서 자주 사용되는 일반적인 조건입니다.

너비를 기준으로 한 조건

 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}

**최소 너비 (min-width)**는 너비가 지정된 값 이상일 때 스타일을 적용합니다.
**최대 너비 (max-width)**는 너비가 지정된 값 이하일 때 스타일을 적용합니다.

장치 방향 (`orientation`)

 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}

**장치 방향 (orientation)**은 세로(portrait) 또는 **가로(landscape)**로 설정할 수 있습니다.

해상도 (`resolution`)

1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}

스타일은 **해상도 (resolution)**를 기준으로 적용할 수 있습니다.
이 예제에서는 고해상도 디스플레이를 위해 고해상도 배경 이미지를 지정합니다.

조건 결합하기

미디어 쿼리는 여러 조건을 결합할 수도 있습니다.

AND 조건 (`and`)

1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}

AND 조건은 모든 조건이 충족될 때 스타일을 적용합니다.
이 예제에서는 화면 너비가 600px 이상이고 세로 방향일 경우, body 배경색이 밝은 초록색으로 설정됩니다.

OR 조건 (`,`)

1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}

OR 조건은 어느 하나의 조건이 충족될 때 스타일을 적용합니다.
이 예제에서는 화면 너비가 400px 이하이거나 가로 방향일 경우, body의 텍스트 색상이 회색으로 설정됩니다.

NOT 조건 (`not`)

1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}

NOT 조건은 조건이 충족되지 않을 때 스타일을 적용합니다.
이 예제에서는 모든 장치에 대해 화면 너비가 600px 이상이 아닌 경우, body의 글꼴 크기가 14px로 설정됩니다.

`@font-face`

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face는 웹 폰트를 정의하는 데 사용됩니다. 이 규칙을 사용하여 외부 폰트를 다운로드하고 웹 페이지에 적용할 수 있습니다.

표준 폰트에 의존하지 않고 사용자 정의 폰트를 사용할 수 있습니다.
폰트 파일 크기에 주의가 필요합니다.

`@keyframes`

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes는 CSS 애니메이션을 생성하는 데 사용됩니다. 애니메이션의 각 단계에서 스타일을 지정할 수 있습니다.

애니메이션에 대한 세부적인 제어가 가능합니다.
animation 속성과 함께 사용됩니다.

`@supports`

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports는 특정 CSS 기능이 브라우저에서 지원되는지 확인하고 결과에 따라 스타일을 적용합니다.

이 규칙은 구형 브라우저와 최신 브라우저 간의 호환성을 유지하는 데 도움이 됩니다.
기능 검출을 통해 대체 스타일을 적용할 수 있습니다.

`@page`

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page는 인쇄를 위한 스타일을 제어하는 데 사용됩니다. 페이지 크기와 여백을 설정하는 데 유용합니다.

포인트:

인쇄 미디어의 스타일을 설정하는 데 사용됩니다.
헤더 및 푸터와 같은 특정 페이지 요소의 스타일을 사용자 정의할 수도 있습니다.

`@charset`

1@charset "UTF-8";

@charset는 CSS 파일의 문자 인코딩을 지정합니다. 주로 UTF-8이 지정됩니다.

스타일 시트 맨 앞에 지정해야 합니다.
특히 다국어 웹사이트에서 사용됩니다.

`@layer`

@layer는 CSS에서 스타일시트의 우선순위를 정리하는 데 사용되는 새로운 @ 규칙으로, 여러 CSS 규칙을 레이어로 그룹화하고 관리할 수 있게 합니다. 이 규칙은 특히 대규모 스타일시트나 여러 외부 스타일시트를 포함하는 프로젝트에서 CSS 충돌을 피하기 쉽게 만드는 데 유용합니다.

CSS 스타일시트에서는 우선순위가 일반적으로 '캐스케이드'에 의해 결정되지만, @layer를 사용하면 스타일 우선순위를 더 유연하고 명확하게 제어할 수 있습니다.

기본 구문

1@layer <layer-name> {
2  /* Styles within this layer */
3}

@layer를 사용하여 스타일을 정의할 때의 문법은 다음과 같습니다.

 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}

예를 들어, 다음과 같이 다른 레이어에 스타일을 정의할 수 있습니다:
이 경우 reset 레이어, base 레이어, theme 레이어가 각각 정의되며, 최종 h1 스타일은 theme 레이어 내용에 의해 결정되어 color: red;가 적용됩니다.

다중 레이어의 우선순위

@layer의 강력한 기능은 레이어 간 스타일의 우선순위를 관리할 수 있다는 점입니다. 위 예에서 theme 레이어가 마지막에 정의되었기 때문에 다른 레이어에 정의된 스타일을 덮어씁니다.

또한, @layer는 외부 스타일시트나 다른 라이브러리에서 로드된 CSS 파일의 우선순위 캐스케이드를 관리하는 데 사용할 수 있습니다.

글로벌 우선순위

 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}

레이어의 순서는 CSS 캐스케이드 내에서 우선순위가 정해지며, 나중에 정의된 스타일이 우선 적용됩니다. 예를 들어, 다음과 같이 작성하여 레이어의 순서를 명시적으로 지정할 수 있습니다.
이는 theme 레이어가 먼저 정의되었더라도 스타일이 theme, base, reset 순서로 적용되도록 보장합니다.

`@layer`와 함께 `@import` 사용하기

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);

@import와 @layer를 결합하여 외부 스타일시트의 레이어를 관리하는 것도 가능합니다.
이를 통해 외부 스타일시트를 다른 레이어에 배치하고 우선순위를 관리할 수 있습니다.

`@layer`의 주요 포인트

@layer는 CSS 스타일 관리를 위한 강력한 도구로, 대규모 프로젝트에서 스타일 충돌을 방지하는 편리한 방법을 제공합니다. 특히 여러 스타일 소스를 다룰 때 스타일 우선순위를 간결하게 관리하는 데 두드러집니다. 다음 사항을 염두에 두는 것이 좋습니다.

레이어별로 스타일을 분리하여 캐스케이드 우선순위를 제어할 수 있습니다.
@import와 함께 사용하여 외부 CSS 파일을 레이어 관리에 포함할 수 있습니다.
여러 레이어를 정의하면 스타일 충돌을 방지할 수 있습니다.

이는 스타일 충돌을 최소화하고 복잡한 스타일 관리가 필요한 프로젝트에서도 효율적인 디자인을 가능하게 합니다.

`@layer` 사용 예시

@layer를 사용할 때는 레이어 명명 규칙, @import 순서, 프로젝트 규모에 적합한 레이어 수와 같은 점을 고려할 수 있습니다.

레이어 명명

레이어 이름은 프로젝트의 구조와 목적에 따라 결정됩니다. 레이어 명명에 대한 일반적인 예시는 다음과 같습니다:.

1@layer base, layout, components, utilities;

base: 리셋 및 타이포그래피와 같은 기본 스타일을 정의하는 레이어.
layout: 페이지 레이아웃 및 그리드 시스템 스타일을 정의하는 레이어.
components: 버튼 및 카드와 같은 재사용 가능한 UI 컴포넌트 스타일을 정의하는 레이어.
utilities: 유틸리티 클래스 스타일을 정의하는 레이어 (예: margin, padding, text-center).

명확한 가져오기 순서

1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);

여러 CSS 파일을 처리할 때는 @import를 사용하여 명확한 순서를 설정하는 것이 중요합니다. 이 순서는 의도한 우선순위가 유지되도록 보장합니다.

레이어 통합 및 단순화

 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}

소규모 프로젝트에서는 레이어 수를 제한하면 복잡성을 줄일 수 있습니다.

요약

CSS @ 규칙은 유연한 스타일 적용과 웹 디자인에서 성능 향상을 지원하는 강력한 도구입니다. @media, @keyframes, @supports는 장치 차이와 브라우저 호환성을 고려한 스타일링을 용이하게 합니다. 또한, @import와 @font-face는 외부 리소스를 효율적으로 통합하여 더욱 풍부한 표현을 가능하게 합니다.

이 @ 규칙들을 이해하고 적절히 사용하는 것은 더 효과적인 CSS 코딩을 가능하게 합니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

CSS 의사 클래스 및 의사 요소

CSS `@` 규칙

YouTube Video

미리보기를 위한 HTML

CSS @ 규칙

대표적인 @ 규칙의 종류

@import

포인트:

@media

일반적으로 사용되는 조건

너비를 기준으로 한 조건

장치 방향 (orientation)

해상도 (resolution)

조건 결합하기

AND 조건 (and)

OR 조건 (,)

NOT 조건 (not)

@font-face

@keyframes

@supports

@page

포인트:

@charset

@layer

기본 구문

다중 레이어의 우선순위

글로벌 우선순위

@layer와 함께 @import 사용하기

@layer의 주요 포인트

@layer 사용 예시

레이어 명명

명확한 가져오기 순서

레이어 통합 및 단순화

요약

YouTube Video

CSS `@` 규칙

대표적인 `@` 규칙의 종류

`@import`

`@media`

장치 방향 (`orientation`)

해상도 (`resolution`)

AND 조건 (`and`)

OR 조건 (`,`)

NOT 조건 (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

`@layer`와 함께 `@import` 사용하기

`@layer`의 주요 포인트

`@layer` 사용 예시