📌 @at sign 규칙
: @(at sign) 기호로 시작하는 CSS 문법
- @charset: 문자의 인코딩 방식을 지정한다.
- 스타일 시트의 첫 번째 요소로 온다. - @import: CSS 엔진에 외부 스타일 시트를 포함하도록 알린다.
- @namespace: CSS 엔진에 모든 콘텐츠가 XML 네임 스페이스로 시작하는 것이 고려되어야 함을 알린다.
- @media: 장치가 미디어 쿼리(media query)로 정의된 조건에 만족하면 해당 콘텐츠를 적용한다.
- 반응형 웹을 만들 때 사용된다. - @document: 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용한다.
- @page: 문서를 출력할 때 적용되는 레이아웃 변화의 양상을 설명한다.
- @font-face: 웹 폰트를 적용할 수 있다.
- @keyframes: CSS 애니메이션 sequence 내 중간에 분기를 설정하여 중간 단계를 제어할 수 있다.
- @counter-style: 미리 정의된 리스트(list) 항목나 카운터 스타일을 지정할 수 있다.
- @container: CSS 부모 요소의 크기나 값이 변경되면 조건이 평가되고 스타일을 적용한다.
- @supports: 브라우저가 주어진 조건을 만족하면 해당 콘텐츠를 적용
- 해당 CSS 기능을 브라우저가 지원하는 지에 따라 다른 스타일로 선언할 수 있다.
- 기능 쿼리(feature query)라고 부른다.
@supports
: CSS 기능이 브라우저가 지원하는지에 따라 다른 스타일을 선언하는 방법
@supports (조건) {
// 적용할 css
}- 기능 쿼리(feature query)라고도 함
- 브라우저가 '조건'을 만족할 때 CSS 코드 적용
- 기존의 CSS 코드와 함께 사용될 때, @supports 규칙은 해당 조건이 충족되는 경우에만 내부 스타일을 적용
기존 코드를 진행하다가 @supports를 만나면 @supports 코드를 진행함
/* flex를 지원하는 웹 브라우저를 위한 스타일
- flex를 지원하면 아래 코드를 해석하겠다는 뜻 */
@supports (display: flex) {
.main {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
}
참고
@-규칙 - CSS: Cascading Style Sheets | MDN
@-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.
developer.mozilla.org
@규칙(At-Rule) | UXKM
CSS(Cascading Style Sheets)에 사용되는 at(@)-규칙 대한 정보를 제공하는 섹션입니다.
uxkm.io
@supports - CSS: Cascading Style Sheets | MDN
The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a feature query. The rule must be placed at the top level of your code or nested inside any other conditi
developer.mozilla.org