다음 뷰 애드 (view AD) 위치를 내 마음대로 옮겨보자

6월 1일부터 티스토리 블로거들을 대상으로 뷰 애드 서비스가 시작되었습니다. 뭐 어차피 글만 썼다하면 수백명의 묻지마 추천을 받는 극소수의 상위 랭커들이 독식하는 구조가 되겠지만, 저는 이왕 티스토리로 옮겨온 김에 다음 뷰도 시작했고 뷰 애드도 호기심에 한번 달아봤습니다. 아마 1만원 준다는 300명 안에도 못 들 것 같습니다. 그냥 당분간 달아만 볼 생각입니다.

아무튼 이 뷰 애드 서비스가 시작부터 말썽입니다. 바로 위치가 본문 우측 상단에 고정되기 때문인데요 CSS에 우선순위로 스타일을 지정해두면 위치 변경이 가능합니다. 물론 절대 포지션으로 사이드바 쪽으로 옮기면 다음 측에서 싫어할테니 적당히 본문에서 좌우로 이동하거나 여백을 조절하는 정도로만 수정하는게 좋을 것 같습니다.

일단 뷰 애드 소스는 아래와 같이 생겼습니다.

첫번째 "ad250_outter" 이놈이 문제입니다. 보시다시피 우측으로 float 시키고 margin 값을 0 0 20 10 으로 지정해뒀는데 저게 마음에 안 드시면 수정할 수 있다는 것입니다.

사실 저는 CSS의 C 자도 모르는 사람인데 그냥 검색을 좀 해보니 !important 를 붙이면 우선순위를 무시할 수 있다는 사실을 알게 되었습니다. 일단 뷰 애드를 좌측으로 옮겨보겠습니다.

스킨 편집의 style.css 부분에 아래와 같이 적으면 끝입니다.

.ad250_outter {float: left !important;}

간단하죠? 뒤에 !important만 붙여주시면 원래 지정되었던 스타일보다 우선적으로 적용이 됩니다.

저대로만 하면 margin 값 때문에 본문이랑 딱 붙어서 안 좋습니다. margin 값 역시 뒤에 !important 붙이시면 원래 값을 무시할 수 있습니다. 원래는 상 0 우 0 하 20 좌 10 이렇게 되어 있었는데 이걸 우 20 하 20 정도로 만들어봅시다.

.ad250_outter {float: left !important; margin: 0px 20px 20px 0px !important;}

위와 같이 설정하면 아래 그림처럼 됩니다.

어차피 구글 애드센스랑 같이 배치하실 분들이 많으실텐데 본문 가로 크기랑 잘 계산해서 한번 적용해보세요. 저는 현재 가로 640px의 본문을 사용중인데 아래와 같이 정리했습니다.

.google_adsense {float: left; margin: 0px 9px 0px 18px;}
.ad250_outter {margin: 6px 18px 6px 9px !important;}

구글 광고 크기는 336*280이고 뷰 애드 크기는 250*268이기 때문에

640 - (336 + 250) = 54
280 - 268 = 12

그래서 가로 여백 54는 3등분 해서 구글 왼쪽에 18을, 구글과 뷰 애드 중간에 각각 9씩, 뷰 애드 우측에 18을 넣었습니다.
세로 크기 차이 12는 뷰 애드 상하에 각각 6씩 배분했구요.

아무튼 저 !important를 잘 활용하시면 된다는게 이 글의 핵심입니다.

참고로 구글 광고 역시 제가 한 것 처럼 skin.html에선 div class로 감싸고 CSS에서 스타일 지정해주시면 됩니다.

<div class="google_adsense">
구글 광고 코드 여기에 삽입
</div>

저는 CSS의 C 자도 모르는 초보이기 때문에 아마 제 눈높이에서 설명한거니 다들 잘 이해하셨으리라 믿습니다. 저는 고수가 아니기 때문에 CSS에 대해 질문하셔도 답변해드릴 자신은 없습니다.