구글 애드센스 광고에 테두리 삽입

애드센스 광고 배치 후 광고에 테두리를 삽입하는 방법

깔끔한 블로그를 유지하고 싶지만 광고를 삽입하면 어느정도 난잡(?) 해지기 마련이다.

호/불호가 갈리기는 하지만 많은 애드센스 사용자들이 테두리를 사용하는것으로 보인다.

테두리를 적용한다고 해서 크게 깔끔해지거나 하지는 않지만 어느정도 광고영역을 분리시켜 놓는다는 점은 만족할만한 점인듯하다.

애드센스를 예로들었지만 모든 광고에 적용 가능하다.

---

아래코드는 현재 YYBOX의 적용된 코드

(테두리 색상변경시 참고 Site: http://www.color-hex.com/)

# skin.html 의 광고코드 상 하단에 테두리 시작, 끝 코드를 붙여넣는다.

<!-- 테두리 시작 -->  <fieldset style="border:2px solid #aaaaaa;text-align:center;width:720px;  height:320px;padding:0;margin:0 auto;position:relative;">  <br>  애드센스 광고코드 삽입  <br>  <!-- 테두리 끝-->  </fieldset>

* 애드센스 광고코드 바로 위아래의<br>태그는 광고 위 아래로 한줄씩 여백을 주기위해 삽입함 

# 각 항목에 대한 설명

1. width (너비) : 테두리의 가로, 너비를 설정 (기본단위는 px 추가로 px, pt, cm, %도 입력가능)  2. height (높이) : 테두리의 세로, 높이를 설정 (기본단위는 px 추가로 px, pt, cm, %도 입력가능)    3. margin (외부여백) : 테두리 밖의 여백을 설정 (Option: top, bottom, left, right)     ex) margin-top:10px; margin-right:10px; 테두리 외부 상단/우측 10px의 여백설정  4. padding (내부여백) : 테두리 안의 여백을 설정 (Option: top, bottom, left, right)     ex) padding-bottom:10px; padding-left:10px; 테두리 내부 하단/좌측 10px의 여백설정  5. text-align (위치) : 테두리안의 광고 위치 (Option: left, center, right)     ex) text-aligb:center 테두리안의 광고 중앙  6. border-width (테두리 두께) : 테두리 두께 설정     ex) border-width:2px; 테두리 두께 2px  7. background-color (배경 색상) : 테두리 안의 배경색상 설정     ex) background-color:#ffffff;  8. border-color (테두리 색상) : 테두리 색상 설정     ex) border-color:#aaaaaa;   9. border-style (테두리 형태) : 테두리 형태를 설정 (Option: dotted, dashed, solid, double, groove)     ex) border-style:solid; 테두리형태를 직선으로 설정

#위 내용을 토대로 적용된 YYBOX 코드의 설명은 다음과 같다

<fieldset style="border:2px solid #aaaaaa;text-align:center;width:720px  ;height:320px;padding:0;margin:0 auto;position:relative;">    1. 테두리 두께 2px border:2px   2 .테두리 형태 직선 solid   3 .테두리 색상 회색 #aaaaaa  4. 테두리안의 광고위치 중앙 text-align:center  5. 테두리가로 720px width:720px  6. 테두리세로 320px height:320px  7. 테두리 내부 여백없음 padding:0  8. 테두리 외부 여백없음 margin:0

YYBOX의 테두리 삽입 전/후

<테두리 적용 전>

<테두리 적용 후>