왜 모든 AMP 페이지에
<style amp-boilerplate> 코드를 포함해야 하는지에 대해
궁금할 수 있습니다. 이것은 AMP 페이지가 로드되는 동안 스타일이 정해지지 않은
콘텐츠가 페이지에 미치는 악영향을 방지하기 위해 AMP 프로젝트 팀이 개발한
방법으로 페이지 렌더링에 꼭 필요한 코드입니다.
- 먼저 AMP 페이지가 로드되는 동안 페이지의 내용을 숨깁니다.
- 그런 다음 AMP JS 라이브러리가 로드됩니다.
- 페이지 렌더링을 완료한 후 숨긴 페이지를 표시합니다.
하지만 이 방법은 문제가 있습니다. 페이지를 로드할 때 AMP JS 라이브러리를 사용할 수 없다면 페이지의 내용은 영원히 숨겨진 상태로 공백으로 표시됩니다.
이 문제를 해결하는 방법은 CSS를 사용하는 것입니다. AMP JS 라이브러리가 내용을 표시하지 못하면 CSS가 내용을 표시합니다. CSS의 keyframe animation으로 몇 초 후에 페이지 내용을 로드할 지 설정하면 사용자는 자동으로 콘텐츠를 볼 수 있게 됩니다.
브라우저 접두사를 뺀 AMP 상용구 코드의 간략한 버전은 다음과 같습니다.
body {
animation: amp-timeout 0s 8s 1 normal forward;
}
@key-frames amp-timeout {
0% {opacity: 0;}
100% {opacity: 1;}
}