• 회원가입
  • 로그인
  • 구글아이디로 로그인

[money] 구글 애드센스 반응형 광고 크기 설정법

3,678  
화면 폭당 정확한 광고 크기의 예

반응형 사이트에 가장 잘 맞는 기기별 정확한 광고 단위 크기를 알고 있는 경우, 
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로 광고 코드의 크기를 설정하는 기능은 공식적으로 지원되지 않습니다.

- 구글 애드센스 설명서 - 

분류 제목
talk 비밀글입니다. 3
web W3C (World Wide Web Consortium) - 국제적인 웹 표준화 단체
pc 크롬 - 자동 업데이트 차단/막기
talk (비밀번호 : 1234) 클릭하라! 질러라! 클릭하면 행복하리라! 2
ucc 다리 좀 꼬지 마요.
vote 사이드메뉴 어느쪽이 좋을까? 3 설문 중
talk 크롬 최신버전으로 업데이트 - 한글버그 수정완료.
web 불법 복제물 링크 행위는 저작권법 위반 아니다.
web 의뢰자견적과 작업자견적 차이 (= 의뢰인과 제작자의 견적차이 = 개발자임금 = 작업임금 = 의뢰가격 = 의뢰…
site 아미나 - 부트스트랩3 기반 (그누보드5・영카트5) 반응형 홈페이지빌더
life 삼성 갤럭시 스마트폰 국제전화 수신 차단
web 코딩 야학 & 생활코딩 좌표 (코야 & 생코)
web PHP - 중괄호로 변수를 감싸서 문자열 중간에 넣지 말기
pc 유튜브 플레이어 등 동영상 화면이 작업표시줄 위로 올라오는 증상 해결법
talk 자꾸 누가 제 귤을 훔쳐 먹습니다. ㅡㅡ;; 3
web (빌더・테마・스킨) 판매 라이선스 종류 (= 라이센스 종류) 및 가격표 (License Price)
web 캐시제거 새로고침
pc 장명옥 발송 저작권 위반 협박 이메일 첨부파일 주의보
money 구글 애드센스 반응형 광고 크기 설정법
dance 냥뇽녕냥 님의 섹시퀸 댄스
122/163
목록
찾아주셔서 감사합니다. Since 2012