수학방

전에 애드센스 반응형 광고 노출되지 않게 하기라는 글을 쓴 적이 있는데요. 애드센스 반응형 광고를 화면의 크기에 따라서 보이지 않게 하는 방법에 대한 소개였어요. 보통 애드센스 광고를 숨기는 건 정책위반인데, 이 방법은 애드센스에서 공식적으로 허용하는 숨기기였죠.

그런데 댓글에 이 방법이 통하지 않는다는 글을 남겨주셨습니다. 반응형 애드센스 모바일 상단! 이거 왜이렇죠? 애드센스 코드상의 문제는 없어보여서 뭔가 다른 곳에서 잘못되었나 보다하고 그냥 넘어갔는데, 실제 광고를 적용해보니 코드 상의 문제였네요. 그 해결방법을 공유합니다.

애드센스가 숨겨지지 않는 문제 해결

애드센스 광고가 제대로 숨겨지지 않는 건 인라인 css와 내부 <style>에 적용된 css의 우선순위때문이었어요. 자세한 건 아래에서 설명하기로 하고 일단은 해결방법부터 알아보죠.

아래는 애드센스에서 제공하는 반응형 광고의 코드와 도움말에 나오는 광고 코드를 숨기는 광고 코드를 비교한 그림입니다.

두 번째 그림에서 광고를 숨기는 가장 중요한 요소는 형광펜으로 칠해진 @media (max-width:400px) {.my_adslot {display:none}}이에요. 바로 광고를 숨기는 코드죠. 이게 제대로 작동하지 않는 게 이 글을 쓰게 된 원인이에요.

그 외에 형관펜과 빨간색 줄로 표시된 차이가 보이죠? <style>의 .my_adslot {}에는 display:inlie-block이 생겼고, <ins> 태그의 두 번째 줄에 있던 style="display:inline-block"이 없어졌죠? 여기까지 해야 광고가 제대로 숨겨지는 겁니다.

방법은 간단해요. 두 번째 그림에 빨간색으로 표시된 것처럼 <ins>에 있는 style="display:inline-block"을 <style>로 옮겨주는 거죠.

문제가 생긴 이유

CSS를 적용하는 방법은 세 가지가 있어요. 외부의 CSS 파일을 사용하는 방법, 내부에서 Style을 지정하는 방법, 태그 안에 인라인으로 CSS를 적용하는 방법이요.

첫 번째 방법은 css를 별도의 파일에 만들어놓고 html 문서의 처음에 이 파일의 주소를 입력하는 방법이에요. 티스토리의 스킨 편집에 보면 아래같은 문장이 있을 거예요.

<link rel="stylesheet" href="./style.css" media="screen" type="text/css">

두 번째 방법은 외부 파일이 아니라 html 문서의 처음에 직접 css를 적용하는 겁니다.

<style>
  p {margin: 10px 0}
  a {color:#00f}
  .adsense {border:solid 1px #ccc}
</style>

세 번째는 태그에 직접 인라인 CSS를 사용하는 거죠.

<p style="margin:10px 0">안녕하세요.</p>

세 가지 방법을 공통으로 적용할 수 있는데, 만약에 하나의 요소에 서로 다른 설정이 되어 있다면 어떻게 될까요? 그때는 인라인 CSS이 가장 우선시되고 그다음이 내부 CSS, 외부 CSS 순서예요.

위 애드센스 코드에서 가장 우선되는 코드는 <ins>안에 있는 인라인 CSS인 style="display:inline-block"이죠. 내부 CSS인 <style>의 @media ……… 에서 아무리 설정을 바꿔봐야 소용이 없어요. 그래서 인라인 CSS를 지워서 문제를 해결한 겁니다.

처음에 문제가 있다는 댓글을 봤을 때는 <style>에 있는 css만 고치면 된다고 생각하고 아래 부분의 <ins>에 또 css가 있을 거라고는 생각조차 못했죠. 그래서 그 원인을 도통 알 수가 없었어요. 가장 기본에서 생각하면 간단히 해결될 일인데 말이죠.

아무튼 이번 기회에 광고를 새로 정리했습니다.

함께 보면 좋은 글

애드센스 반응형 광고 노출되지 않게 하기
애드센스 A/B테스트을 쉽게 - 실험 베타 서비스
애드센스 수입 향상 팁 - 텍스트 광고 편
애드센스 필수 가이드북
애드센스 최적화 배치 방법, 히트맵(headtmap)

댓글에 가끔 인쇄 버튼 만들어 달라고 하는 분들이 계시더라고요. 인쇄버튼을 어떻게 만드는 지 모르거니와 검색해보면 자바스트립트를 이용한 팁들이 있는데, 좀 어렵더라고요.

그래서 그냥 브라우저 메뉴의 파일 - 인쇄를 사용하시라고 했죠. 대신 인쇄할 때는 본문만 필요하니까 광고, 사이드바, 댓글 등은 인쇄되지 않는 인쇄 페이지를 만들어 사용하고 있어요.

CSS를 이용하기때문에 어려운 자바스크립트를 알 필요도 없고, 인쇄할 페이지를 제가 직접 디자인할 수 있기때문에 장점이 많은 방법이기도 합니다.

CSS로 인쇄 페이지 만들기

CSS의 media type을 이용하는 방법이에요. CSS는 페이지를 디자인하기 위한 언어인데, 웹에서 보이는 화면이나 인쇄할 때 프리젠테이션할 때 등 다양한 환경에 따라 다르게 적용할 수 있어요. 이 중에서 프린터를 사용할 때 보여주는 화면을 CSS로 설정해서 인쇄 페이지를 꾸미는 거예요.

관리자의 HTML/CSS 편집에서 style.css에 @media print{ }을 적고 { } 사이에 인쇄 페이지에서 사용할 CSS를 넣기만 하면 됩니다. CSS는 스킨 편집을 자주 하시는 분이라면 어렵지 않게 하실거라 생각해요.

이 방법을 사용할 때는 숨기고 싶은 모든 항목에 선택자인 class나 id가 지정되어 있어야 해요. 선택자가 없다면 직접 지정해주시면 됩니다.

CSS 속성중에 화면에 표시하지 않도록 하는 display:none을 이용해서 인쇄할 페이지에 광고나 사이드바, 댓글 들을 보이지 않도록 할 꺼니까요.

사이드바를 숨기고 싶다면 #sidebar {display:none} 하면 돼요. 인쇄할 필요가 없는 모든 선택자들을 죽 쓰고 마지막에 {display:none}을 사용하면 되죠.

이 외에도 CSS인 건 마찬가지니까 다른 글자 크기나 여백 등의 다른 CSS 설정들도 사용할 수 있어요.

아래는 인쇄 페이지를 만든 css 보기에요.

@media print {
 body {
   background:transparent;
   font-size:13px;
   width:auto
 }

 #container {
   background:transparent;
   margin:20px;
   padding:0;
   width:auto
 }

 #content {
   background:transparent;
   margin:10px;
   padding:0;
   width:95%
 }

 #ttDesk_AdminDiv,#ttDesk_alert,#header,#sidebar,#footer,.another_category,.trackback,.navigation,.comment,.blogger-news-widget,.tagTrail {
   display:none
 }
}

 아래는 실제 적용된 인쇄 페이지입니다. 광고와 사이드바 없이 본문만 깔끔하게 인쇄되겠죠?

실제로 티스토리에서는 본문 외에 여러가지 항목들이 있어서 이 걸 다 적어줘야하는 불편함이 있어요. 또 선택자가 없는 경우는 선택자를 입력도 해줘야하고요.

자바스크립트를 이용해서 인쇄 버튼을 만드는 것보다는 불편한 방법이긴 하지만 인쇄할 페이지를 꾸밀 수 있다는 장점이 있으니 사이트를 잘 알릴 수 있도록 한 번 꾸며보세요.

함께 보면 좋은 글

블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
W3C CSS 유효성 검사, CSS Validation Service
블로그 속도 측정 - Google PageSpeed Insights
애드센스 최적화 배치 도움되는 곳