[프론트엔드][CSS] TIL -Day 11.1 @-규칙

<@-규칙의 일반적인 구조와 예>

 

@-규칙

 

@-규칙은 식별자(identifier)가 뒤따르는 at 기호('@')로 시작하는 CSS문이며 다음 세미콜론(';') 또는 다음 CSS 블록 중 먼저 오는 쪽까지의 모든 것을 포함하는 범위 안에서 적용된다.

 

 

 

<CSS at-규칙>

CSS at-규칙	특징	예시	예시의 의미
중첩 명령문이 아님 ㅡ 조건부 그룹 @규칙 내에서 사용할 수 없음
@charset	스타일 시트에 쓰이는 문자 인코딩을 지정, 스타일 시트의 첫 번째 요소여야 함, 여러 @charset이 정의된 경우 첫 번째 것만 사용되고, <style>요소 내에서 사용될 수 없음	@charset "utf-8";	브라우저에게 utf-8 character set을 사용한다고 알려라.
@import	다른 스타일 시트에서 스타일 규칙을 가져올 때 사용, CSS 엔진에게 외부 스타일 시트를 포함하도록 알림, @charset규칙을 제외하고 모든 여타의 규칙보다 선행해야 함	@import 'custom.css'; @import url("chrome://communicator/skin/");	외부 스타일 시트인 custom.css를 포함한다고 CSS 엔진에게 알려라. 주소 chrome://communicator/skin/를 포함한다고 알려라.
@namespace	CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의, 보통 여러 네임스페이스(인라인 SVG, mathML 있는 HTML5, 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용	@namespace url(XML-namespace-URL); @namespace "XML-namespace-URL"; @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL";	XML-namespace-URL가 기본 네임스페이스  XML-namespace-URL라는 접두어가 붙은 네임스페이스
중첩 @-규칙 ㅡ 스타일의 최상위 단계 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있음
@media	스타일 시트의 일부를 하나 이상의 미디어쿼리 결과에 따라 적용할 때 사용, @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있음	@media screen and (min-width: 900px) {   article {     padding: 1rem 3rem;   } } @supports (display: flex) {   @media screen and (min-width: 900px) {     article {       display: flex;     }   } }	screen 타입에 최소 너비가 900px 이상(조건)인 미디어에 article{...}의 스타일 적용한다. 하나는 최상위 코드 레벨 형태, 하나는 다른 조건부 @규칙 내에 중첩 형태
@supports	CSS 기능을 브라우저가 지원하는지에 다라 다른 스타일 선언을 할 수 있는 방법을 제공, 특정 기능의 브라우저 지원 조건과 연결할 수 있고, 하나 이상의 키-값 쌍을 논리곱(and), 논리합(or), 부정(not)으로 연결해 구성함. 괄호로 우선순위 지정도 가능	@supports (transform-origin: 5% 5%) {} @supports (display: table-cell) and (display: list-item) {}	단순히 속성 이름 transform-orgin과 그 값 5% 5%가 유효하다고 여길 때 통과해라. 이때 괄호로 묶여있어야 함 display가 table-cell이면서, list-item인 경우에만 참을 반환
@page	문서를 출력할 때 적용되는 레이아웃 변화의 양상(aspect)을 설명, 문서를 인쇄할 때 일부 CSS 속성(margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break)을 수정하는 데 쓰임	@page {     margin: 1cm;   }	margin을 1cm으로 해 출력해라.
@font-face	다운로드되는 외부 글꼴의 양상을 설명, 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있게 됨	@font-face {   font-family: MyHelvetica;   src: local("Helvetica Neue Bold"),   local("HelveticaNeue-Bold"),   url(MgOpenModernaBold.ttf);   font-weight: bold; }	로컬에 설치된 폰트 Helvetica Neue Bold, HelveticaNeue-Bold, 그리고 원격폰트의 파일 위치가 MgOpenModernaBold.ttf에 있는 폰트를 사용한다. 이때, 폰트 속성에서 폰트명으로는 MyHelvetica로 설정한다. 폰트의 굵기는 굵게 이다.