애드센스 반응형 광고가 숨겨지지 않을 때 해결 방법

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

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

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

애드센스 광고가 제대로 숨겨지지 않는 건 인라인 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 문서의 처음에 이 파일의 주소를 입력하는 방법이에요. 티스토리의 스킨 편집에 보면 아래같은 문장이 있을 거예요.

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

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

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

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

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

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

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

그리드형