At-rules 에 대해서(aka. CSS에서 @로 시작하는 규칙)

CSS를 작성하다보면 @keyframes 과 같은 작성 방법을 본적이 한번쯤은 있을것이다.
이러한 것을 At-rules 라고 하는데 오늘은 이것에 대해서 알아보도록 하겠습니다.

At-rules란?

At-rules는 요소의 스타일을 지정하는 것 이상의 CSS 프로세서를 위한 특수 지침입니다.
스타일 시트의 동작을 제어하거나, 메타데이터를 정의하거나, 조건부 스타일을 제공하는 경우가 많습니다.

At-rules 작성방법

/* General structure */
@identifier (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";

위와 같이 보통 작성합니다.

일반적으로 사용되는 몇가지 At-rules들

1. @media : 다양한 미디어 유형이나 장치에 대해 다양한 스타일을 지정하는 데 사용된다.

@media screen and (max-width: 600px) {
    /* styles for screens with a maximum width of 600px */
}

2. @font-face : 웹 글꼴 포함을 위한 사용자 정의 글꼴 속성을 정의하는 데 사용된다.

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2") format('woff2'),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff") format('woff'),
    url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf") format('opentype');
}

위 코드의 src에 대해서 좀 더 자세하게 살펴보자면,
url("어쩌구1") format('저쩌구1'),
url("어쩌구2") format('저쩌구2'),
url("어쩌구3") format('저쩌구3');
형식으로 이루어진것을 알 수 있다.

이것은 브라우저는 지원되는 형식을 찾을 때까지 나열된 순서대로 각 url을 시도합니다.
먼저 format('저쩌구1')가 포함된 첫번째 url("어쩌구1")이 브라우저에서 지원되지 않으면
format('저쩌구2')가 포함된 두번째 url("어쩌구2")로 이동합니다.

이러한 접근 방식을 글꼴 형식 대체라고 합니다.
브라우저의 기능에 관계없이 웹 페이지가 사용 가능한 가장 적합한 형식으로 글꼴을 로드하도록 시도합니다.

3. @keyframes : 키프레임 세트를 통해 애니메이션을 정의하는 데 사용됩니다.

@keyframes rotate {
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#result_loading .img_wrap img {
    width: 100%;
    height: auto;
    animation: rotate 1.1s infinite linear;
}

위 코드에 대해서 자세히 살펴보자면,
rotate라는 이름의 @keyframes 애니메이션을 정의한 다음,
해당 애니메이션을 #result_loading .img_wrap 내의 <img>요소에 적용합니다.

(rotate 대신 개발자가 부르고자 하는 이름으로 선택하여도 됩니다.)
rotate는 요소를 180도에서 360도로 회전시키는 rotate라는 애니메이션을 정의하고, 애니메이션을 완료하는 데 1.1초가 걸립니다.

4. @import : 다른 CSS파일 내에 외부 CSS파이를 포함하는 데 사용됩니다.

@import url('styles.css');

5. @supports : 특정 기능이나 속성이 지원되는 경우 스타일을 적용하는 데 사용됩니다.

@supports (display: grid) {
    /* styles for browser that support CSS Grid */
}

6. @page : 인쇄된 페이지의 스타일을 정의하는 데 사용됩니다.

@page {
    margin : 1cm;
}

7. @namespace : XML문서의 기본 XML 네임스페이스를 선언하는 데 사용됩니다.

@namespace url(http://www.w3.org.1999.xhtml);

8. @charset : 외부 스타일시트의 charset을 지정하는 데 사용됩니다.

@charset "UTF-8";

 

 

참고문서 : MDN At-rule