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에 대해 질문하셔도 답변해드릴 자신은 없습니다.

  1. 선빵거사
    2010.06.03 00:43 신고

    찾고있던 정보인데////

  2. BlogIcon you틸
    2010.06.03 00:56 신고

    감사합니다.
    저도 설치는 했는데 너무 이상하게 나오길래 고민했는데 몇번 수정해보면 맘에들게 되겠죠 ㅋ

  3. BlogIcon 함차가족
    2010.06.03 10:15 신고

    제가 찾던 자료인데요..아공..머리아퍼..
    적용하려니 쉽지 않네요

    • BlogIcon snoopybox
      2010.06.03 14:58 신고
      수정 및 삭제

      그냥 style.css에 .ad250_outter {속성} 이것만 넣어주시면 되는데 ㅠㅠ 물론 각 속성 뒤에 !important를 붙이는게 이 글의 핵심이구요.

  4. subinacl
    2010.06.03 10:34 신고

    스누피님 항상 좋은 정보 감사합니다.

    한가지 궁금한것 여쭤봐도 될까요?

    64비트의 7에서 Internet Explorer 8를 실행시키면 속도가 굉장히 느린 편인데
    임시적으로 관리자권한으로 실행시켜주면 속도가 상당히 빨라졌습니다.
    이를 이용해서 항상 인터넷 익스플로러 8을 관리자 권한으로 실행시켜주고 싶은데
    문제는 인터넷 익스플로러의 경우 Windows 버전의 일부분이라며 호환성 설정이 안먹히더군요.
    항상 인터넷 익스플로러를 관리자 권한으로 실행시켜줄 수는 없는건가요?
    그리고 인터넷 익스플로러처럼 호환성 설정이 안먹히는 프로그렘들을 항상 관리자 권한으로 실행할 수 있을까요?

  5. BlogIcon shinlucky
    2010.06.03 13:52 신고

    important 넣지 않으니 변경이 안되서 좀 방황하고 있었는데, 바로 답을 찾아가네요.
    감사합니다. ^_^

  6. BlogIcon 다리칭구
    2010.06.04 02:12 신고

    아고 감사합니다 ㅎ 그런데 왜 전 두개가 나올까요 +_+;

    • BlogIcon snoopybox
      2010.06.04 13:22 신고
      수정 및 삭제

      CSS에만 한줄 추가하신거 아닌가요? 뷰애드 소스는 넣지마시고 그냥 CSS에만 딱 한줄 추가하시면 이중으로 나올 일이 없는데...

    • BlogIcon 다리칭구
      2010.06.04 18:21 신고
      수정 및 삭제

      앗!! 님 댓글에 힌트를 얻어 드디어 성공했습니다!!
      사실 계속 두개가 나와서 뷰AD 광고노출을 해지해놓고 있었거든여 ㅋ
      감사합니다~~ 많은 도움이 되었습니다!! ^^

  7. BlogIcon 한성민
    2010.06.04 11:29 신고

    이것 때문에 고생을 했는데 한방에 끝냈네요...^^
    감사 합니다....~~~~

  8. BlogIcon demun
    2010.06.07 17:58 신고

    다음의 view AD가 나오면서 각종 글이 많이 쏟아지고 있습니다. 그동안의 애드클릭스에 목이 말라서 그런가요?
    좋은글 잘 봤습니다. 트랙백하나 겁니다.

  9. BlogIcon magicps
    2010.06.09 13:49 신고

    스누피님 저 애드뷰 설정도 켜놓구 소스 코드도 추가했는데...위치 조정이 안되네요;;
    -_-; 근데 이 애드 뷰를 사이드바 쪽에 있는 곳이나 빈 여백으로 옮길 수도 있는지 궁금하네요

  10. BlogIcon 닉쑤
    2010.08.06 20:21 신고

    보고 잘 따라했습니다.
    감사합니다~ ^^