구글 애드센스 광고 바깥 테두리 넣기 (div 태그)

구글 애드센스 광고 최적화 방법 중 하나로 애드센스 광고에 테두리를 입히는 방법도 제시됩니다. 테두리를 입힘으로써 광고를 좀 더 부각시킬 수 도 있고, 블로그 스킨과 조화를 이루면서 자연스럽게 CTR이 증가되는 효과를 거둘 수 있나 봅니다.

티스토리 블로그에서 테두리를 입히는 가장 간단한 방법은 아래 그림처럼 글쓰기에서 직접 1칸짜리 표나 글상자를 만들어 준 후에 안에 간단한 글을 입력합니다.

HTML 보기로 변환한 후 입력된 글 부분을 구글 애드센스 광고코드로 대체하면 됩니다. 하지만 이 방식은 보시다시피 태그가 너무 지저분하게 들어갑니다.;; 또한 자신의 블로그에 맞게 테두리 두께나 색상을 변경하려면 결국 태그를 약간이나마 이해하는게 도움이 됩니다.

흔히 광고를 삽입하는 태그로는 'TABLE'(표) 태그와 'DIV'(글상자) 태그가 있습니다. 둘 다 웹표준이긴 하나 DIV 태그를 사용하는 것이 검색엔진에 유리하다고 하니, DIV 태그를 활용해 애드센스 광고 바깥의 테두리를 입히는 방법에 대해서 알아봤습니다.

◈ 중요 Style 정리

▪ width (너비) : DIV영역의 가로, 너비를 설정

▪ height (높이) : DIV영역의 세로, 높이를 설정
※ width, height 값을 정해주지 않으면 내용에 따라 자동으로 조절 됨. 숫자와 단위(px, pt, cm, %, etc)로 입력하며, 숫자단위를 입력하지 않으면 px로 인식

▪ overflow (맞춤) : 긴 글자나 큰 이미지, 또는 링크로 인해 내용이 DIV 영역 밖으로 벗어나 레이아웃을 망치는 걸 방지해 줌. visible(그냥 보여줌), hidden(감춤), scroll(스크롤), auto(자동)

▪ margin (바깥여백) : div 영역 밖의 여백을 설정, top(상), bottom(하), left(좌), right(우)을 각각 정해줄 수 있습니다.
ex) margin-top:10px; margin-left:10px; ➔ 테두리 바깥의 상단과 좌측에 10px 만큼 여백을 준다

▪ padding (내부여백) : div 영역 안의 여백을 설정 margin과 같은 방식으로 설정

▪ text-align (정렬) : 테두리안의 내용을 정렬, left(왼쪽정렬), center(가운데정렬), right(오른쪽정렬)
ex) text-aligb:center ➔ 애드센스 광고를 가운데로 위치

▪ float (위치) : 테두리의 위치를 정해줌 left(왼쪽) right(오른쪽)

▪ border-width (테두리 두께) : 테두리 두께를 설정. "0" 일때는 보이지 않음.
ex) border-width:4px; ➔ 테두리 두께 4px

▪ background-color (배경 색상) :
ex) background-color:#FFFFFF; ➔ 테두리 안의 배경색상을 흰색(#FFFFFF)으로

▪ border-color (테두리 색상) :
ex) border-color:#c1c1c1; ➔ 테두리 색상을  회색(#c1c1c1) 으로

▪ border-style (테두리 형태) : 테두리 형태를 설정, dotted, dashed, solid, double, groove...등
ex) border-style:solid; ➔ 테두리 바깥을 직선으로 설정

위의 중요 스타일만 알아도 웬만한 테두리 설정을 입맛대로 변경할 수 있으며, 여기에 애드센스 광고를 넣으면 됩니다. 예를 들어 아래와 같이 코드를 작성해서 원하는 위치에 해당하는 HTML에 추가하시면 됩니다.

<div style="border:1px solid #aaaaaa; text-align:center; padding-top:15px; padding-bottom:15px;" >

구글 애드센스 광고 코드

</div>

테두리 굵기(border)는 1px로 형태는 직선(solid)이며, 선 색깔은 짙은 회색(#aaaaaa)으로 설정되었습니다. 테두리 안의 광고의 위치를 가로 기준으로 가운데 정렬(text-align:center)하고, 위 아래 여백을 15px 정도로 맞춰졌습니다. (padding-top:15px; padding-bottom:15px;)