[css] CSS에서 ‘@’기호의 목적은 무엇입니까?

@@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 에서 다른 전체 목록을 찾을 수 있습니다 .

답변

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

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

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