AMP CSS 스타일 제한 사항

2 min read

HTML에서와 마찬가지로 CSS는 AMP에서 레이아웃 및 디자인의 핵심입니다. AMP 페이지의 사용자 지정 CSS 스타일을 추가하는 경우 일부 작업에 대한 제한 사항이 있습니다. 다음과 같은 사항을 주의해야 합니다.

  • 모든 스타일은 문서의 head에 정의되어야 합니다.
  • 최대 75KB의 CSS가 허용됩니다.
  • 외부 스타일 시트를 사용할 수 없습니다.

이에 대한 추가적인 제한 사항도 있습니다.

Style 제한 여부 설명
!important 선언자 허용되지 않음 AMP가 스타일 지정 규칙을 적용하도록 허용
-amp-i-amp-
시작하는 클래스 및 태그 이름
허용되지 않음 사용자 스타일 시트는 이러한 클래스 및 태그에 대한
CSS 선택자를 정의하거나 참조할 수 없습니다.
behavior, -moz- binding 허용되지 않음 보안 문제로 인한 제한
filter 허용되지 않음 성능 문제로 인한 제한
transition 제한됨 GPU 가속 속성만 허용 : opacity, transform,
-vendorPrefix-transform
@keyframes {...} 제한됨 GPU 가속 속성만 허용 : opacity, transform,
-vendorPrefix-transform
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • Google Accelerated Mobile Pages (Google AMP)는 amp-html을 사용하여 웹 페이지를 경량화하여 구현할 수 있도록 특별히 만들어진 Google의 새로운 오픈 소스 프로젝트입니다. 이 프로젝트의 주요 목표는 AMP 코드를 잘 적용하여 스마트폰, 태블릿 등과 같은 가능한 모…
  • 구글 블로그 Blogger에서 Google 애드센스 광고를 표시하려면 애드센스 자바스크립트 코드가 있어야 합니다. Google 애드센스는 AMP 용 광고를 지원하고 있습니다. AMP 버전에서는 아래 코드를 삽입합니다. <script async="async" cust…
  • AMP 맞춤 자바스크립트 오류는 AMP 오류 중 가장 흔한 오류입니다. 맞춤 자바스크립트 오류 발생 원인과 "맞춤 자바스크립트는 허용되지 않습니다." 문제를 해결하는 방법에 대해 알아봅니다. 맞춤 자바스크립트란? AMP 페이지 내에서 허용되지 않는 모든 자바…
  • 구글 가속 모바일 페이지(Google Accelerated Mobile Pages, Google AMP)는 구글의 오픈 소스 프로젝트로 amp-html을 사용하여 가벼운 웹 페이지를 빌드합니다. 구글의 새로운 오픈 메인 프로그램인 AMP는 스마트폰과 태블릿같은 가능한 모든 …
  • 구글 블로그 HTML 편집에서 AMP HTML과 일반 HTML의 가장 분명한 차이점은 이미지 코드 작성입니다. 일반적으로 기존 HTML 에서는 <img ... />를 사용하여 이미지를 표시하지만 AMP HTML은 다음과 같이 작성합니다. <amp…
  • 구글 검색 결과에서 이 번개 표시는 무엇일까요? 이 번개 표시는 Google의 AMP 프로젝트 로고로, 빠른 모바일 웹 페이지라는 Google 인증 배지 입니다. AMP 프로젝트 로고가 번개 모양인 이유가 있습니다. 실제로 AMP 페이지는 번개처럼 빠르기 때문입니다. …

댓글 쓰기