광고 쉘 생성하기
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>
...
</head>
</html>
<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 광고 스타일링을 위해 <head> 섹션의 <style amp-custom> 태그를 사용하여 AMPHTML 문서에 CSS를 인라인으로 삽입해야 합니다. 현재 예시에서는 기본 이미지 광고를 렌더링하는 것이므로 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 광고가 생성되었지만 이 광고는 비어 있습니다. 다음으로 이미지 광고를 제작해보겠습니다.