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

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

이 질문을 우연히 발견했는데 사용자가 이전에 본 적이 없는 표기법을 사용하고 있다는 것을 알게 되었습니다.

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

이것도 마찬가지야@CSS3에서 뭔가 새로운 것을 상징하거나, 아니면 내가 어떻게든 간과했던 오래된 것을?당신이 사용하는 신분증이 있는 곳 같은 건가요?#그리고 당신이 사용하는 수업으로..구글은 저에게 이와 관련된 좋은 기사를 주지 않았습니다.의 목적은 무엇입니까?@CSS 기호?

@의 시대부터 존재해 왔습니다.@importCSS1에서, 비록 그것이 최근에 점점 더 흔해지고 있지만.@media(CSS2, CSS3) 및@font-face(CSS3) 건설.@구문 자체는, 제가 언급했듯이, 새로운 것은 아닙니다.

이것들은 모두 CSS에서 at-rule로 알려져 있습니다.(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 규칙은 미디어 쿼리(이전에는 미디어 유형만)와 함께 페이지가 표시되는 미디어를 기준으로 적용되는 스타일과 그렇지 않은 스타일을 제어합니다.코드 예제에서는 문서를 인쇄할 때만 모든 텍스트를 흰색(종이) 배경에 검은색으로 설정해야 합니다.미디어 쿼리를 사용하여 인쇄 미디어, 모바일 장치 등을 필터링하고 해당 페이지를 다르게 스타일할 수 있습니다.

A-규칙은 선택기와 아무런 관련이 없습니다.다양한 특성 때문에 다양한 at-rule은 수많은 모듈에 걸쳐 다양한 방식으로 정의됩니다.다른 예는 다음과 같습니다.

• 조건부 규칙
• 키프레임 애니메이션
• 페이징 미디어

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

MDN에서 완전하지 않은 다른 목록을 찾을 수 있습니다.

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

@수입의
@페이지
@미디어
@무표정한
@문자열의
@지옥의

위의 것들을 s라고 부릅니다.

@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보다 큰 화면을 지정합니다.

이 기능은 작은 화면에서 탭 레이블의 글꼴 크기를 작은 화면의 포인트 크기 아래로 떨어뜨려 모두 맞출 수 있는 경우와 같이 유용합니다.

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; }

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

는 규칙 사양으로 사용됩니다.맘에 들다@font-face

언급URL : https://stackoverflow.com/questions/3453257/what-is-the-purpose-of-the-symbol-in-css