CSS At-Rule은 무엇이며 CSS 기능을 어떻게 확장합니까?

CSS에서 '@' 기호의 목적 이해

최근 CSS에서 "@" 기호가 부각되면서 호기심을 불러일으켰습니다. 이전에 접하지 못했던 개발자들 사이에서 말이죠. 비공식적으로 "at-rule"이라고 알려진 이 기호는 CSS에서 스타일이 적용되는 방식을 제어하는 ​​데 중요한 역할을 합니다.

역사적 배경

"@" CSS1의 초기부터 CSS에 있었으며 주로 "@import" 규칙에 사용되었습니다. CSS2 및 CSS3의 도입으로 "@media" 및 "@font-face" 구문에서 더 폭넓은 인식을 얻었습니다.

At-Rules의 목적

At-규칙은 HTML/XML 요소의 스타일 이상으로 확장되는 브라우저에 대한 특수 지침입니다. 이는 다음을 포함하여 CSS의 다양한 측면을 제어하는 ​​메커니즘을 제공합니다.

• 스타일 시트 가져오기(@import): 이를 통해 다른 파일의 추가 CSS 코드를 스타일 시트에 통합할 수 있습니다.
• 적용 미디어별 스타일(@media): 미디어 쿼리를 사용하면 특정 미디어 유형(예: 인쇄, 모바일)을 대상으로 하고 이를 기반으로 선택적으로 스타일을 적용할 수 있습니다. 기준.
• 사용자 정의 글꼴 정의(@font-face): 이를 통해 모든 컴퓨터에서 기본적으로 사용할 수 없는 사용자 정의 웹 글꼴을 포함할 수 있으므로 장치 전체에서 일관된 글꼴 렌더링이 보장됩니다.

선택기 너머

특정 HTML/XML 요소를 대상으로 하는 선택기와 달리, at-규칙은 다른 수준에서 작동합니다. 브라우저에서 스타일을 적용하고 해석하는 방법을 제어합니다.

추가 At-규칙

위에서 언급한 일반적으로 사용되는 at-규칙 외에도 다양한 유형이 정의되어 있습니다. 다음을 포함한 CSS:

• 조건부 규칙(@if, @else)
• 키프레임 애니메이션(@keyframes)
• 페이지 미디어(@page)

결론

CSS의 "@" 기호는 개발자가 스타일시트의 기능과 제어를 확장할 수 있는 다목적 도구입니다. 다양한 시나리오와 장치에 맞는 정교하고 효율적인 CSS 코드를 작성하려면 at-rule의 목적과 사용법을 이해하는 것이 중요합니다.

위 내용은 CSS At-Rule은 무엇이며 CSS 기능을 어떻게 확장합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!