css. CSS At-rules(At-규칙) 총정리

CSS At-rules 

 

- 자주 사용하는것만 정리.

- 나머지 at-rules는 아래 인덱스 참조!

 

 

1 . @charset

 

@charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정한다.

스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 한다.

>> 즉, 맨 처음에 나와야함.

@charset "utf-8";

 

 

 

2. @font-face

 

@font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. 

@font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 

컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. 

@font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다. 

(조건문 적용 가능!)

 

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

• font-family
• src

= 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정.

 

 

 

 

3. @import

 

다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰인다.

이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 먼저 작성해야 한다.

@import는 중첩 명령문이 아니기 때문에 조건부 그룹 @규칙 내에 사용할 수 없다,

 

>> 즉, charset - import순으로 먼저와야함!

 

@import url;
@import url list-of-media-queries;

 

참고로, url은 그냥 패키지 명 및 일부를 지정할 수 있으며

적절한 파일이 자동으로 선택된다(가령 chrome://communicator/skin/)

 

 

 

 

4. @keyframes

 

개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써

CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 해준다.

>> 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있음.

 

크게 from{}과 to{}로 나뉘고,

0%, 30%, .. , 100%와 같이 %기호로 나타내기도 함.

 

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes @규칙은 CSS 오브젝트 모델 인터페이스인 CSSKeyframesRule 를 통해서 접근함.

 

 

키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리스트를 매칭시킬

animation-name 속성 에서 사용할 이름과 함께 생성

>> 위 예제에서는 slidein이  이름임.

 

+)키프레임에서 !important 속성을 이용한 정의는 모두 무시됨.

 

 

 

 

5. @media

 

스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.

@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

 

▪ 자바스크립트 - CSSMediaRule 로 접근 가능

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

** 참고로 min-width는 뷰포트의 너비가 900이상 일때 적용하라는 의미임.

>> 즉, 일정 값 '이하'일때 적용시키려면 max-width로 해야함!

 

 

 

 

6. @page

 

문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰인다. 

@page로 모든 CSS 속성을 바꿀 수는 없고,

문서의 margin, orphan, widow 및 page break만 바꿀 수 있다!

다른 CSS 속성을 바꾸려는 시도는 무시됨.

@page {
  margin: 1cm;
}

@page에서는 vh,vw,vmin,vmax를 사용하지 말것. (아직은 논의중인듯)

 

 

 

 

7. @supports

 

주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공함

= 기능 쿼리(feature query)라고 부름.

 

@supports는 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있습니다.

 

 

 

 

 

+) 추후 참고

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

 

---

 

index

 

1. @charset
2. @color-profile
3. @counter-style
4. @document
5. @font-face
6. @font-feature-values
7. @import
8. @keyframes
9. @layer
10. @media
11. @namespace
12. @page
13. @property 
14. @scroll-timeline
15. @supports

 

 

---

 

CR.

MDN Web Docs