애드센스 반응형 광고 만들기

소요 시간: 1분 조회수: 117

애드센스 광고를 블로그에 삽입할 때, 다양한 디바이스와 화면 크기에 맞춰 유연하게 광고를 보여주는 것은 매우 중요합니다. 이러한 반응형 광고를 구현하는 방법을 알아보겠습니다.


반응형 광고란?

반응형 광고는 웹 페이지의 레이아웃에 따라 광고의 크기와 모양이 자동으로 조정되는 광고 형식입니다. 이를 통해 데스크톱, 태블릿, 모바일 등 다양한 기기에서 최적의 광고 노출을 보장할 수 있습니다.


HTML

반응형 광고를 구현하기 위해서는 HTML 코드에서 애드센스 광고 태그를 설정해야 합니다. 먼저, ins 태그의 클래스에 responsive_ad_top을 추가합니다.

<!-- 애드센스 광고 -->
<div align="center">
    <ins class="adsbygoogle responsive_ad_top"
        style="display:inline-block"
        data-full-width-responsive="false"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
        data-ad-slot="xxxxxxxxxx"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
</div>

위의 코드는 중앙 정렬된 애드센스 광고 블록을 정의합니다. data-ad-client와 data-ad-slot 속성에는 각각 자신의 애드센스 클라이언트 ID와 광고 슬롯 ID를 입력합니다.


CSS 코드 설정

반응형 광고의 크기를 조정하기 위해 CSS 미디어 쿼리를 사용합니다. 다음은 다양한 화면 크기에 맞춰 광고의 크기를 조정하는 CSS 코드입니다.

.responsive_ad_top { width: 320px; height: 100px; }
@media(min-width: 500px) { .responsive_ad_top { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive_ad_top { width: 728px; height: 90px; } }

초기 크기 설정

.responsive_ad_top 클래스는 기본적으로 320px 너비와 100px 높이를 갖도록 설정됩니다. 이는 주로 모바일 기기에서 사용됩니다.

중간 크기 설정

화면 너비가 500px 이상일 경우, 광고 크기는 468px 너비와 60px 높이로 조정됩니다. 이는 태블릿과 같은 중간 크기의 화면을 타겟으로 합니다.

큰 화면 설정

화면 너비가 800px 이상일 경우, 광고 크기는 728px 너비와 90px 높이로 변경됩니다. 이는 데스크톱과 같은 큰 화면에서 최적의 광고 노출을 제공합니다.


결론

위의 설정을 통해 애드센스 반응형 광고를 구현하면 다양한 기기에서 최적의 광고 크기를 유지할 수 있습니다. HTML과 CSS를 적절히 활용하여 반응형 디자인을 적용하면 방문자의 경험을 향상시키고, 광고 수익을 극대화할 수 있습니다.

이 가이드가 블로그에 반응형 애드센스 광고를 설정하는 데 도움이 되길 바랍니다. 추가적인 설정이나 최적화가 필요하다면, 구글 애드센스 공식 문서를 참고하시기 바랍니다.

인기글

CSS 리스트