CSS에서 '@'기호의 목적은 무엇입니까?

148

방금 이 질문을 우연히 발견했으며 사용자가 전에 본 적이없는 표기법을 사용하고 있음을 알았습니다.

@font-face {
   /* CSS HERE */
}

이 @기호는 CSS3의 새로운 것입니까, 아니면 내가 간과했던 것입니까? 이것은 사용하는 ID #와 사용하는 클래스와 같은 것 .입니까? Google은 이와 관련된 좋은 기사를 제공하지 않았습니다. @CSS 에서 심볼 의 목적은 무엇입니까 ?

css syntax symbols

— 크리스토
소스

177

@@importCSS1 시절부터 사용되어 왔지만 최근 @media(CSS2, CSS3) 및 @font-face(CSS3) 구문 에서 점점 일반화되고 있습니다 . @내가 언급 한 바와 같이 구문 자체는하지만, 새로운 것이 아니다.

이것들은 모두 CSS에서 at-rules 로 알려져 있습니다. 이 규칙은 스타일을 적용하는 방법을 제어하는 데 중요한 역할을하지만 규칙과 속성을 사용하여 웹 문서의 (X) HTML / XML 요소 스타일과 직접 관련이없는 브라우저에 대한 특별 지침입니다.

일부 코드 예제 :

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

@font-face규칙 은 모든 컴퓨터에서 항상 사용할 수있는 디자인에 사용할 사용자 정의 글꼴을 정의하므로 브라우저는 서버에서 글꼴을 다운로드하여 사용자 컴퓨터에 글꼴이있는 것처럼 해당 사용자 정의 글꼴의 텍스트를 설정합니다.
@media미디어 쿼리 (이전의 미디어 유형 만) 와 함께 규칙 은 적용되는 스타일을 제어하고 페이지가 표시되는 미디어를 기반으로하지 않는 스타일을 제어합니다. 내 코드 예제에서는 문서를 인쇄 할 때만 모든 텍스트를 설정해야합니다. 흰색 (종이) 배경에 검은 색으로. 미디어 쿼리를 사용하여 인쇄 미디어, 모바일 장치 등을 필터링하고 페이지의 스타일을 다르게 지정할 수 있습니다.

At-rule은 선택자 와 관련이 없습니다. 그 특성이 다양하기 때문에 다양한 at-rule이 수많은 다른 모듈에 걸쳐 서로 다른 방식으로 정의됩니다. 더 많은 예는 다음과 같습니다.

(이 목록은 완전하지 않습니다)

MDN 에서 다른 전체 목록을 찾을 수 있습니다 .

— BoltClock
소스

2

@media print {/ * 비디오 또는 오디오 파일을 인쇄하려고합니까? * /}

— kurdtpage

26

@ 규칙을 정의하는 데 사용됩니다.

@import
@page
@media
@ font-face
@charset @namespace @ 가져
오기

위의 이름은 at-rules입니다.

— 프랭키
소스

2

"규칙 정의"란 무엇을 의미합니까?

— Hristo

1

At-rules는 여러 CSS 규칙을 캡슐화하여 특정 규칙에 적용합니다. ( htmldog.com/guides/cssadvanced/atrules )

— Frankie

7

추가로 설명하는 데 유용한 @media의 예는 다음과 같습니다.

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

작은 화면에서는 작은 이미지를 사용하여 화면의 크기에 따라 조건에 따라 이미지의 크기가 달라집니다. 첫 번째 블록은 화면을 최대 너비 1440px까지 지정합니다. 두 번째는 1440px보다 큰 화면을 처리합니다.

이것은 작은 화면에서 떠 다니거나 스크롤되는 탭과 같은 것들에 유용합니다. 작은 화면에서 탭 레이블의 글꼴 크기를 포인트 크기 아래로 떨어 뜨리고 모두 맞도록 할 수 있습니다.

— 밥로드
소스

1

@는 규칙 사양으로 사용됩니다. 처럼@font-face

— r3st0r3
소스

1

ProBoards CSS 스타일은이를 변수로 사용합니다.

다음은 CSS 페이지 중 하나에서 가져온 작은 스 니펫입니다.

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

참고 : 네이티브가 아니며 첫 번째 주석을 참조하십시오.

— Tcll
소스