티스토리 운영

애드센스 광고 크기 지정

혜원21 2019. 10. 7. 16:00
*

애드센스 광고를 정확한 크기를 지정하는 방법을 알아보겠습니다.

광고가 들어가는 영역(본문과 그 외 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/· 애드센스] - 애드센스 광고 모양 지정



최근댓글