화면 폭당 정확한 광고 크기의 예
반응형 사이트에 가장 잘 맞는 기기별 정확한 광고 단위 크기를 알고 있는 경우,
CSS3 미디어 쿼리를 활용해 반응형 광고 단위의 크기를 설정 (조절, 통제)할 수 있습니다.
다음 예를 통해 CSS3 미디어 쿼리를 사용하여 광고 코드를 수정하는 방법을 알아봅니다.
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:750px ) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media 규칙은 CSS3 구문이며, 모든 최신 브라우저에서 지원됩니다.
Internet Explorer 7 이하 버전과 같은 이전 브라우저를 지원하려면 먼저 기본 크기를 지정해야 합니다.
그러면 미디어 쿼리가 지원되지 않을 때도 광고가 게재됩니다.
외부 스타일시트에서 CSS로 광고 코드의 크기를 설정하는 기능은 공식적으로 지원되지 않습니다.
- 구글 애드센스 설명서 -
