CSS At-Rules (@import, @font-face 등) 란?

CSS At-rules 란? (@import, @namespace 등)

CSS 의 At-rules 란 CSS Statement(CSS 문) 의 한 종류이다. CSS 문은 CSS 가 어떻게 동작할지에 대해 지시한다.

At-rules 는 At 기호 ('@', U+0040 COMMERCIAL AT) 으로 시작하여 다음 세미콜론 (';', U+003B SEMICOLON) 혹은 다음 CSS 블록이 나오기 전까지 내용이 포함된다.

문법

내부 블록을 활용하지 않는 At-rules

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

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

아래의 At-rules 는 일반적으로 자주 사용되는 것들이다.

• @charset: 문자의 인코딩 방식 정의
• @import: CSS 엔진에게 외부의 스타일을 가져오라고 지시
• @namespace: XML 네임스페이스 접두어와 함께 다루어진다고 표기

내부 블록을 활용하는 At-rules

@identifier (RULE) {
}

• @media: (Conditional) 기준에 맞는 Device 를 이용할 때 활성화 되는 CSS 를 정의
• @supports: (Conditional) 브라우저가 특정 기능을 지원하면, 적용될 CSS 를 정의
  • ex) @supports (display: flex) { ... }
• @document (deprecated): (Conditional) 특정 조건을 만족하는 document 에만 적용될 CSS 를 정의
• @page: 프린트 시 특정 페이지에만 적용될 CSS 를 정의
• @font-face: 다운로드될 외부 폰트를 정의
• @keyframes: CSS 애니메이션 시퀀스에서 중간 단계를 정의
• @counter-style: list-style 에 들어갈 스타일을 커스텀하게 정의 가능
  • ex) 1., 2., 3. 와 같은 식이 아닌 Ⓐ, Ⓑ, Ⓒ 와 같은 형식으로 정의 가능
• @font-feature-values: 폰트별로 다른 설정을 해주는 것 (Experimental, 크롬 사용 불가)
• @property (Experimental): CSS 커스텀 프로퍼티를 설정할 수 있도록 도와줌. (Experimental, 파이어폭스 사용 불가)
• @layer: 레이어를 지정하여 CSS 를 설정함.
  • 액자식으로 A 레이어 안의 B 레이어 안의 C 이런식