애드센스 광고를 정확한 크기를 지정하는 방법을 알아보겠습니다.
광고가 들어가는 영역(본문과 그 외 div) 크기에 따라 변경할 수 있습니다.
반응형 광고를 쓰면 크게 필요는 없지만 꼭 써야 할 부분이 생깁니다.
정확한 크기 설정은 css를 이용해서 만듭니다. 미디어 커리라는 태그를 쓰는데 크게 어렵지 않으니 따라 해 보세요.
▲ 이 태그는 예시입니다. 태그를 해석해보겠습니다. 다른 부분은 기존의 광고 코드와 동일하고 노란 테두리 부분이 추가된 것입니다.
.example_responsive_1 < 이건 그냥 id 같은 겁니다. 아무것이나 써도 상관없습니다. 영문과 숫자 그리고 _ 만 쓸 수 있습니다. 예시 그대로 써도 상관없습니다.
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
화면 폭 500픽셀 이하: 광고 크기 320x100
화면 폭 500~799픽셀: 광고 크기 468x60
화면 폭 800픽셀 이상: 광고 크기 728x90
<ins class="adsbygoogle example_responsive_1" // 여기 example 앞에 . (점) 없습니다. 조심하세요.
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXX11XXX9" // 자신의 광고 고유 번호를 적어주세요.
data-ad-slot="8XXXXX1"></ins> // 자신의 광고 고유 번호를 적어주세요.
@media는 스킨 편집에서 몇 번 보셨죠? 반응형을 만들 때 쓰는 태그입니다.
편집 태그는 파일 첨부하겠습니다.
광고 크기 지정.txt글 수정 - 2019.11.04
최근 data-full-width-responsive="true" 태그 추가로인한 광고 크기를 수정 하는 방법이 완전 달라졌습니다. 그에 관한 글은 조만간 포스팅 예정입니다.
글 수정 - 2019.11.14
새롭게 적용된 광고 크기에 관한 글입니다.
2019/11/13 - [블로그 T.I.P/· 애드센스] - 애드센스 광고 모양 지정