[구글 애드센스] Google Adsense HTML/CSS 설정 연구..

 Html에 익숙치 않으신 분들은 Adsense를 본문에 다는 중에도 많은 시행착오가 있으시리라 생각됩니다. 그 중 저 역시도 많은 글을 읽고 시도해 보면서 겨우 본문에 이쁘게 정렬할 수 있었는데요.

 본문에 정렬할 때 생길 수 있는 배치상의 오류와 그 수정법에 대해서 말씀드리겠습니다.

 

애드센스 따라하기..

 

 우선 본문 상단에 배너를 배치하고 싶었습니다. 해서 제 본문 폭을 살펴보았더니 575px 이더군요. (본문폭은 홈페이지에서 'Q'를 누르면 관리페이지로 넘어가게 되는데, 글관리->글설정에서 '글 쓰기 가로폭'을 통해 확인 할 수 있습니다.)

 

 575px이라면.. 많은 사람들이 애용하시는 300px*250px를 두개 배치할 수는 없더군요.. 그래서 250px*250px를 두개 달기로 결정을 했습니다.

 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 250*250 배너 -->
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:250px"
data-ad-client="ca-pub-8660546672794704"
data-ad-slot="3685323476"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 위와 같은 코드가 복사 되더군요. 그래서 위의 코드를 연달아 붙였더니..

 

 

 이것은 무슨 괴현상인가요?

 모두 오른쪽으로 정렬이 되버렸던 것입니다. 그래서 오류를 해결하고자 여러 사이트를 돌아볼 수 밖에 없었습니다.

 

오류 해결하기..

 사이트를 돌아보며 느낀 점은 Html의 많은 고수분들이 존재한다는 것이었으나 초보자의 입장에서 명확한 해결책을 제시해주시는 분은 없더군요. 그래서 사이트를 전전하며 Html공부를 시작하게 되었습니다.

 

 

 첫번째 도달한 해결책은 아래 박스처럼

 

HTML

<div class="google_left">
왼쪽 구글 애드센스 광고 코드 입력
</div>
<div class="google_right">
왼쪽 구글 애드센스 광고 코드 입력
</div>

CSS
.google_left{float:left;margin:0px 0px 0px 30px;}
.google_right{float:right;margin:0px 0px 0px 30px;}

 

 위의 코드와 같이 div 코드로 묶어서 left와 right로 각각의 배너를 나누어 배치하는 작업이었습니다. 근데 결과는??

 

 

 해결이 안되더군요..

 

 

HTML / CSS 분해하기

 

 

 누군가를 붙잡고 해결하고 싶었으나 지인중에 프로그래머가 있는 것도 아니고.. 분석에 들어갔습니다. 나름 이리저리 적용하다보니 div의 의미와 CSS의 용도를 알 수 있겠더군요.

 

우선 <div class="google_left">에서 div와 /div란 구글 애드센스 코드를 감싸안는 구분명령이며 google_left는 그 구분명령의 이름을 명명한 것이라 이해했습니다.

그리고 CSS란 google_left라는 이름을 CSS에 적용해서 Html상의 google_left라는 이름의 구분된 코드에 {}안의 스타일을 적용하시오.. 라고 이해가 되더군요. (ex) CSS : .google_left {google_left의 스타일}

 

 이렇게 이해를 하고서 width라는 넓이 지정 명령어와 margin이라는 명령어는 이리저리 뒤져서 아래와 같은 코드를 작성하였습니다.

 

HTML
<div class="google_box> -google_box를 한번 더 씌우고
<div class="google_left">
왼쪽 구글 애드센스 광고 코드 입력
</div>
<div class="google_right">
왼쪽 구글 애드센스 광고 코드 입력
</div> </div> -google_box를 한번 더 닫았습니다.

CSS
.google_left{float:left;margin:0px 0px 40px 30px;}
.google_right{float:right;margin:0px 0px 40px 0px;}

.google_box{width:575px;} -그리고 너의 크기는 575px가 한계야!

 

 그리고~ 이쁘게 정렬하기 위해서 margin의 세번째 칸에 40px를 더 주었습니다. (margin은 젤 왼쪽부터 0px(위쪽) 0px(오른쪽) 40px(아래쪽) 30px(왼쪽)이라더군요.)

즉, 각각의 광고를 left와 right의 div로 구분하고 그 구분된 광고들을 하나로 다시 div로 묶었습니다. 그리고는 큰 박스로 구분된 google_box는 니 넓이의 한계는 575px니까!! 다음줄로 넘어가지마!!를 CSS : .google_box {width:575px;}로 정의하였고 저장하여 이제는 되겠지를 외치면서... 적용하였습니다.

 

 

 으악~!!! 정말 저를 분노케 만드는 Html입니다. html의 빈공간까지 기어이 기어올라와 제목을 넣어버리는 html...

 

해결하기

 

 여기까지 오고나니 누가 이기나 해보자란 심정으로 저 빈 공간을 메워보기로 하였습니다. 그래서 최종적으로 선택한 코드는 아래와 같습니다.

 

HTML
<div class="google_box> -google_box를 한번 더 씌우고
<div class="google_left">
왼쪽 구글 애드센스 광고 코드 입력
</div>
<div class="google_right">
왼쪽 구글 애드센스 광고 코드 입력
</div> </div> -google_box를 한번 더 닫았습니다.

CSS
.google_left{float:left;margin:0px 0px 40px 35px;}
.google_right{float:right;margin:0px 0px 40px 40px;}

.google_box{width:575px;} -그리고 너의 크기는 575px가 한계야!

 

 제가 쓰는 광고 크기가 가로폭이 250px이기에 2개를 합치면 500px이므로 (총 글쓰기 가로폭 575px)-(배너 250px*2개) 75px를 두 배너에 적절히 분배하였습니다.

그래서 최종적으로 배너는 안착을 하였고, 새벽 한시가 넘어 취침을 하게 되었다는 .... 그래도 완성본을 보고 있자니 뿌듯하네요.