@규칙(At-Rule) - by. UXKM

2024-07-30

요약 설명
CSS에서는 W3C에서 규정하고 있는 몇몇 규칙들을 사용할 수 있습니다.
그 중에서도 많이 사용되는 대표적인 규칙은 다음과 같습니다.
@import
@font-face
@media

@-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며
다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.

식별자가 지정된 각각 다른 구문인 여러 @규칙(At-Rule)에 대해 설명합니다.

@charset

스타일 시트에 쓰이는 문자 인코딩을 지정합니다.
스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다.
여러 @charset at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 style attribute 또는 HTML 페이지의 문자 집합과 관련 있는 <style> 요소 내에서 사용될 수 없습니다.

							@charset "utf-8"; /* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 */
							@charset 'iso-8859-15'; /* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 */

@import

스타일 시트에서 다른 스타일 규칙을 가져올 때 쓰입니다.
이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다.

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

							@import [ <string> | <url> ] [ <media-query-list> ];
							@import 'uxkm.css'; /* 일반적인 사용 */
							@import url("uxkmprint.css") print; /* 인쇄용 */
							@import url("bluish.css") speech; /* 페이지를 읽어주는 화면낭독기 */
							@import url("chrome://communicator/skin/"); /* URL이 지정되지 않은 경우 자동으로 할당된 경우 */
							@import "uxReset.css" screen;/* 컴퓨터 스크린, 테블릿, 스마트폰 등 screen을 지정 않해도 기본이 screen임 */
							@import url('landscape.css') screen and (orientation:landscape); /* 화면이 가로/세로 유형을 선택 */

@import 규칙을 사용해도 추가하는 CSS 파일의 개수가 늘어나면 여전히 웹 서버의 부하는 커질 수밖에 없습니다.
따라서 웹 서버의 부하를 줄이기 위해 작성한 CSS 파일들을 적절히 분산해서 추가하는 방법이 필요해집니다.
@import 규칙을 이용하면 미디어 쿼리(media query)의 조건에 따라 필요한 CSS 파일만을 선별적으로 불러올 수 있습니다.
다음 예제는 프린트할 때에는 firstStyleSheet.css 파일을 불러오고, 스크린이 가로 방향으로 설정되어 있을 때는 secondStyleSheet.css 파일을 불러오는 예제입니다.

							@import url("firstStyleSheet.css") print;
							@import "secondStyleSheet.css" screen and (orientation:landscape);

@namespace

CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다.
정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자를 제한하는 데 사용될 수 있습니다.

@namespace 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.
어떤 @namespace 규칙이든 모든 @charset 및 @import 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 스타일 선언보다 앞서야 합니다.

@namespace는 스타일 시트를 위한 기본 네임스페이스를 정의하는 데 사용될 수 있습니다.
기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님) 는 그 네임스페이스 내 요소에만 적용됩니다.

@namespace 규칙은 또한 네임스페이스 접두어(namespace prefix)를 정의하는 데도 사용될 수 있습니다.
universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 및 이름이 일치하는 경우에만 일치합니다.

외부 요소로 알려진 HTML5에서는, 자동으로 네임스페이스가 할당됩니다.
이는 HTML 요소는 마치 XHTML 네임스페이스 (http://www.w3.org/1999/xhtml) 에 있는 것처럼 행동하고, 문서 어디에든 xmlns attribute가 없을지라도, <svg> 및 <math> 요소는 그들의 적절한 네임스페이스 (http://www.w3.org/2000/svg 및 http://www.w3.org/1998/Math/MathML) 가 할당됨을 뜻합니다.

							/* 기본 네임스페이스 */
							@namespace url('XML-namespace-URL');
							@namespace "XML-namespace-URL";

							/* 접두어 붙은 네임스페이스 */
							@namespace prefix url('XML-namespace-URL');
							@namespace prefix "XML-namespace-URL";

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

							/* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */
							a {}

							/* 이는 모든 SVG <a> 요소와 일치합니다 */
							svg|a {}

							/* 이는 XHTML 및 SVG <a>요소 둘 다와 일치합니다 */
							*|a {}

위에서 지정된 규칙외에 중첩 문의 부분 집합으로 이루어진 중첩 @-규칙 대해 설명합니다.
중첩 @-규칙 - 중첩 문의 부분 집합으로, 조건부 그룹 규칙 속뿐만 아니라 스타일 시트의 문으로 사용될 수 있습니다.

@supports

하나 이상의 특정 CSS 기능에 대한 브라우저의 지원에 따라 선언을 지정할 수 있습니다. 이를 기능 쿼리라고합니다.
규칙은 코드의 최상위 수준에 배치되거나 다른 조건부 그룹 규칙 안에 중첩 될 수 있습니다.
지원 조건은 하나 이상의 키-값 쌍을 논리곱(and), 논리합(or), 부정(not)으로 연결해 구성합니다. 괄호로 묶어 우선순위를 지정할 수도 있습니다.

							/* 가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다.*/
							/* 브라우저가 transform-origin 속성의 값으로 5% 5%가 유효하다고 여길 때 통과합니다. */
							@supports (transform-origin: 5% 5%) {}

							/* 주어진 CSS 속성의 지원 여부 판별 예시 */
							@supports (animation-name: test) {
								… /* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 */
								@keyframes { /* 다른 @-규칙을 중첩 가능 */
								…
								}
							}
							/* 주어진 CSS 속성 및 접두사 버전의 지원 여부 판별 예시 */
							@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
								… /* 접두사가 붙더라도 3D 변형을 지원하면 CSS 적용 */
							}

							/* 특정 CSS 속성의 미지원 여부 판별 예시 */
							@supports not ((text-align-last: justify) or (-moz-text-align-last: justify) ){
								… /* text-align-last: justify를 대체할 CSS */
							}

							/* 사용자 정의 속성 지원 여부 판별 예시 */
							@supports (--foo: green) {
								body {
									color: var(--varName);
								}
							}

							/* :is()를 지원하지 않는 브라우저에서는 무시함 */
							:is(ul, ol) > li {
								… /* :is() 선택자를 지원할 때 적용할 CSS */
							}

							@supports not selector(:is(a, b)) {
								/* :is()를 지원하지 않을 때 대체할 CSS */
								ul > li,
								ol > li {
									… /* :is()를 지원하지 않을 때 적용할 CSS */
								}
							}

							@supports selector(:nth-child(1n of a, b)) {
								/* @supports로 먼저 묶지 않으면 :nth-child()의 of 구문을 지원하지 않는 브라우저에서 스타일을 잘못 적용할 수 있음 */
								:is(:nth-child(1n of ul, ol) a, details > summary) {
									… /* :is() 선택자와 :nth-child()의 of 구문을 지원할 때 적용할 CSS */
								}
							}

@media

장치가 미디어 질의(media query)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙입니다.
min-width 또는 max-width 를 활용하여 반응형 레이아웃(Responsive layout)을 구현할 수 있습니다.

							/* 최상위 코드 레벨 */
							@media screen and (min-width: 900px) {
								article {
									padding: 1rem 3rem;
								}
							}

							/* 다른 조건부 @규칙 내에 중첩 */
							@supports (display: flex) {
								@media screen and (min-width: 900px) {
									article {
										display: flex;
									}
								}
							}

							/* desktop first 반응형 레이아웃 예시 (아래는 예시에 의한 수치이므로 실제 프로젝트에 사용할 때는 bootstrap의 media사이즈를 참고하는 것을 추천) */
							/* 기본 1280+ 해상도의 기본 css 선언 후 */
							@media(max-width:1279px;){ /* wrap이 1280px보다 클 경우 그보다 작은 브라우져 크기에도 대응 */ }
							@media(max-width:993px;){ /* 테블릿 pc 해상도에 대응 */ }
							@media(max-width:767px;){ /* 작은 테블릿 pc & 모바일 가로 모드에 대응 */ }
							@media(max-width:620px;){ /* 모바일 세로 모드에 대응 */ }

@page

문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. @page로 모든 CSS 속성을 바꿀 수는 없습니다.
문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.

							@page {
								margin: 1cm;
							}

							@page :first {
								margin: 2cm;
							}

@font-face

텍스트를 표시 할 사용자 정의 글꼴을 지정합니다. 글꼴은 원격 서버나 로컬 컴퓨터에서 사용자 컴퓨터에로드 할 수 있습니다.
@font-face을 사용하는 자세한 방법은 CSS 중급과정 @font-face에서 설명합니다.

@keyframes

애니메이션 시퀀스를 따라 키 프레임 (또는 웨이 포인트)의 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어합니다.
@keyframes을 사용하는 자세한 방법은 CSS 고급과정 Animation에서 설명합니다.