부트스트립 기반 반응형 티스토리 스킨을 위한 팁 - 광고관리

부트스트립 기반의 반응형 스킨을 사용하시는 분들이 많습니다. 이런 분들 중에 애드센스를 비롯한 광고를 달고계시는달고 계시는 분들에게 가장 골치거리가골칫거리가 모바일 화면에서의 광고관리입니다.

특히 애드센스의 경우, 모바일에서의 규정이 매우 까다롭습니다.

한 화면에 2개의 광고노출 금지, 콘텐츠가 보이지 않고 첫 화면에 광고만 노출금지, 일정크기이상 첫화면 사용금지 등 다양한 규제를 가하고 있습니다.

이러한 내용들이내용이 자동으로 처리되면 좋겠지만, 현실은 그렇지 않습니다.

이런 분들을 위해서 팁을 하나 드리겠습니다. 이 내용은 부트스트립을 기반으로 하는 티스토리 반응형 스킨을 쓰시는 분들에게 해당됩니다해당합니다.

내 스킨이 반응형인데 부트스트립 기반인 줄 모르겠다 하시는 분들은,

관리 - HTML/CSS 편집 - 파일 업로드에서 파일을 살펴봤을 때, 다음의 파일이 있으면 부트스트립 기반이라고 생각하면 됩니다.

bootstrip.min.js, bootstrip.min.css 위 파일이 있으면 부트스트립 기반이라고 생각하셔도 무방합니다.

부트스트립 기반에서는 간단한 설정을 통하여 화면 해상도에 따라서 보여주거나 숨길 수 있는 옵션이 있습니다.

이 옵션을 활용하며, 각 디바이스(컴퓨터, 태블릿, 스마트폰)에 따라서 내가 원하는 광고를 게재할 수 있습니다.

사용법도 매우 간단합니다.

예제를 통해 알아보도록 하겠습니다. 애드센스를 기준으로 알아보도록 하겠습니다. 다른 광고도 모두 같은 과정을 거치기 때문에 광고 삽입코드만 대체하면 똑같이 사용할 수 있습니다.

일단 이 예제에서 사용할 내용은 다음과 같습니다.

일반 PC에서는 336 X 280 광고 2개를 제목 다음에 보여준다.

태블릿도 PC와 같은 형식의 광고를 보여준다.

모바일에서는 320X100 형식의 광고를 1개만 보여준다. 

위 내용을 간단하게 만들어 보도록 하겠습니다.

위 내용을 구현하려면 먼저 광고단위가 있어야 합니다. 사용할 광고단위는 이미 있는 것으로 판단하고 내용을 설명하도록 하겠습니다.

HTML 편집이 가능한 프로그램에서 skin..html 을 불러옵니다.

검색 기능을 통하여 "##_article_rep_desc_##" 부분을 찾습니다.

윗부분은 티스토리에서 작성하는 글의 본문을 화면에 출력해 주는 부분입니다.

이 윗부분에 광고코드를 집어넣으면 본문 윗부분, 즉 제목 다음에 광고가 보여지게보이게 됩니다. 아마도 많은 분들이 아실 것이라것으로 생각 합니다.

다만, 여러분의 스킨상황에 맞춰 광고를 집어넣을 때, 다음의 DIV를 추가하면 됩니다.

<div class="visible-lg visible-md visible-sm"> - 추가부분

< 336x280 광고2개 광고코드 >

</div> - 추가부분

이렇게 광고를 집어넣으면, 일반 PC와 태블릿에서는 336X280 광고 2개가 보여지게보이게 됩니다. 그 크기의 기준은 768입니다.

즉, 768 이상의 해상도에서는 위 광고코드를 화면에 보여주게 됩니다.

그 역할을 해주는 내용이 'visible-lg, md, sm 입니다. 이 내용은 아까 찾아봤던 bootstrip.min.css에 정의되어 있습니다. 

그 내용을 대충 설명하자면

visible-lg 는 1,200픽셀 이상의 해상도

visible-md는 992픽셀에서 1,119픽셀 사이의 해상도

visible-sm은 768픽셀에서 991픽셀 사이의 해상도

visible-xs는 767픽셀 이하의 해상도

즉, 위에 정의된 해상도에 따라서 그 내용을 다르게 보여줄 수 있습니다.

visiable-lg class를 사용하면 1,200픽셀 이상의 해상도에서만 보여집니다보입니다.

visiable-md class를 사용하면 992픽셀에서 1,119픽셀의 해상도에서만 보여집니다보입니다.

visible-sm class를 사용하면 768픽셀에서 991픽셀 사이의 해상도에서만 보여집니다보입니다.

visible-xs class를 사용하면 767픽셀 이하의 해상도에서만 보여집니다.

즉,

<div class="visiable-lg">

    안녕하세요 만나서 반갑습니다.

</div>

위 내용을 홈페이지에 집어넣으면 위 내용은 1,200픽셀 이상에서만 보여 집니다보입니다. 참 여기에서의 해상도는 브라우저의 크기입니다. 컴퓨터의 해상도가 아니라 현재 실행되는 브라우저의 해상도를 의미합니다.

CSS나 HTML에 대한 내용을 아시는 분들은 이미 의미 전달이 됐을 것이라 생각 합니다.

우리는 모든 해상도에서는 336X280 광고를 767 이하의 모바일에서는 320x100의 광고를 사용할 예정이기 때문에 최종 완성은 아래와 같은 형식으로 완성해 주시면 됩니다.

<div class="visible-lg visible-md visible-sm">

< 336x280 광고2개 광고코드 >

</div>

<div class="visible-xs">

< 320x100 광고1개 광고코드 >

</div>

본문보여지는 구문

설명은 복잡하게 이루어졌지만, 구현은 매우 간단합니다.

모바일에서 보일 광고단위를 따로 만들고, 기존의 광고단위는 모바일 이상의 해상도에서만 보여지도록보이도록 하고, 모바일 해상도에서는 모바일용 광고단위를 보여지게보이게 만들면 됩니다.

이렇게 구성을 하고 저장을 하면 아래 그림과 같이 모바일 화면에서는 작은 320x100 크기의 광고가 보여집니다보입니다.

브라우져의 해상도가 모바일기준보다 클 경우 위 그림처럼 두개의 광고가 보여진다.

브라우져의 해상도가 모바일 해상도일 경우 1개의 광고가 보여진다.

궁금하신 점은 댓글로 문의 바랍니다.