JB FACTORY

애드핏 광고 중 PC/모바일 광고는 반응형이 아닙니다. 정해진 크기 그대로 나옵니다. 예를 들어 728x90 광고를 삽입했는데, 웹브라우저의 가로 크기가 728px 보다 작으면 가로 스크롤이 생기고 광고가 잘려서 나옵니다. 따라서 반응형 스킨을 사용한다면 웹브라우저 가로 크기에 따라 적절하게 나오도록 조정을 해야 합니다.

자바스크립트와 미디어쿼리를 이용하면 특정 가로 크기 범위에서만 광고가 나오도록 만들 수 있습니다. 주의할 점은 IE는 10 이상부터 가능하다는 것입니다.

다음은 1024px 이상에서만 애드핏 광고가 나오도록 만든 코드입니다.

<script>
	if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "xxx" data-ad-width = "300" data-ad-height = "250"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>

document.write 안의 작은 따옴표 안에 애드핏 광고 코드를 넣습니다. 여러 줄로 되어 있는 광고 코드를 한 줄로 만들어서 넣어야 하고, 마지막의 </script>를 <\/script>로 바꿔야 한다는 것에 주의합니다.

만약 768px 이하에서만 광고가 나오게 하려면 다음과 같이 합니다.

<script>
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "xxx" data-ad-width = "300" data-ad-height = "250"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>

위 아래 여백을 주고, 가운데 정렬하고 싶다면 다음과 같이 합니다.

<script>
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<div style="margin: 30px 0px; text-align: center;"><ins class="kakao_ad_area" style="display:none;" data-ad-unit = "xxx" data-ad-width = "300" data-ad-height = "250"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script></div>' );
	}
</script>

1024px 이상에서는 728x90, 768px 이하에서는 300x250 광고가 나오게 하려면 다음과 같이 합니다.

<script>
	if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "xxx" data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "xxx" data-ad-width = "300" data-ad-height = "250"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>