구글 애드센스 반응형 광고 크기 조절 방법

구글 애드센스 광고는 고정형과 반응형이 있다. 고정형 광고는 크기가 고정되어서 웹사이트에 게재되는 것이고, 반응형 광고는 웹사이트의 크기에 따라 크기가 다르게 나오는 광고이다. 웹사이트가 반응형으로 제작했을 때, 반응형 광고를 넣으면 자동으로 적절한 광고로 나오기 때문에 편리하다.

반응형 광고에 크기 제한을 걸고 싶다면 CSS를 적용해야 한다. 미디어쿼리로 화면 너비를 구분할 수 있게 하여 특정 너비가 될 때 어떤 광고 크기를 적용할지를 정할 수 있다. 애드센스 광고 코드에 보면 class넣는 부분이 있다. 새로운 class를 만들어서 미디어쿼리를 적용한다면 특정 광고 크기를 적용할 수 있다.

미디어쿼리는 @media 로 시작하는 코드이다. min-width 속성을 사용해서 화면 너비를 정할 수 있다. @media 는 CSS3 구문이다.

예를 들면 <ins class="adbygoogle ads"> 처럼 ads 클래스를 추가하고, ads 클래스에 미디어쿼리를 이용해서 너비를 정해주면 된다.

@media (min-width: 500px) { .ads { width: 468px; height: 60px; } }

추가로 애드센스 광고를 특정 너비에서 숨기고 싶다면 @media 속성을 이용해서 화면 너비를 정하고, display: none; 속성으로 특정 너비가 되면 광고를 보이지 않게 할 수 있다.

예를 들면 @media (max-width: 400px) { .ads { display: none; } } 이렇게 코드를 작성했을시, 화면 너비가 400픽셀 미만인 경우 해당 class를 가지고 있는 광고는 광고가 게재되지 않는다.