광고 쉘 생성하기
AMPHTML 광고에 필요한 HTML은 AMP 페이지에 필요한 AMPHTML의 변형입니다. AMPHTML 광고 쉘을 생성하며 필수 코드를 익혀보겠습니다.
가장 좋아하는 텍스트 에디터를 사용하여 my-amphtml-ad.html라는 이름의 HTML 파일을 생성합니다. 다음 HTML 마크업을 해당 파일에 붙여넣기합니다:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My amphtml ad</title> <meta name="viewport" content="width=device-width"> </head> <body> </body> </html>
이 마크업은 유효한 기본 HTML 파일입니다. 반응형 뷰포트를 설정하고자 meta 뷰포트 태그가 추가되었습니다.
이제 HTML을 수정하여 AMPHTML 광고로 제작하겠습니다.
<html> 태그에 ⚡4ads 속성을 추가하면 문서가 AMPHTML 광고로 식별됩니다. 또는 유효한 다른 속성인 amp4ads 속성을 지정할 수도 있습니다.
<!doctype html> <html ⚡4ads> <head> ...
참조 – AMP 페이지와는 달리 AMPHTML 광고에는
<link rel="canonical"> 태그가 필요하지 않습니다. AMPHTML 광고는 자체적인 AMP 런타임 버전을 필요로 하므로 다음 <script> 태그를 문서의 <head> 섹션에 추가합니다.
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
AMPHTML 광고에는 AMP 페이지와는 다르고 훨씬 단순한 상용구 스타일 라인이 필요합니다. 다음 코드를 <head> 섹션에 추가합니다.
<style amp4ads-boilerplate>body{visibility:hidden}</style>
AMPHTML 광고 스타일링을 위해 섹션의 태그를 사용하여 AMPHTML 문서에 CSS를 인라인으로 삽입해야 합니다. 현재 예시에서는 기본 이미지 광고를 렌더링하는 것이므로 CSS는 필요하지 않습니다. 따라서 해당 태그도 추가하지 않습니다.
참조 – AMPHTML 광고의 경우 인라인 스타일 시트의 최대 크기는 20 킬로바이트입니다. AMPHTML 광고 사양의 CSS 요구 사항을 자세히 알아보세요.
HTML 파일의 완성된 코드는 다음과 같습니다.
<!doctype html> <html ⚡4ads> <head> <meta charset="utf-8"> <title>My amphtml ad</title> <meta name="viewport" content="width=device-width"> <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> <style amp4ads-boilerplate>body{visibility:hidden}</style> </head> <body> </body> </html>
이제 유효한 AMPHTML 광고가 생성되었지만 이 광고는 비어 있습니다. 다음으로 이미지 광고를 제작해보겠습니다.