이번에 애드센스 광고가 승인되어 기존에 회색으로 영역을 지정해둔 곳에 광고들이 출력되기 시작했습니다.
문제는 반응형 광고단위로 생성했는데도 좌측 카테고리 상단의 광고가 크기와 맞지 않게 나오고 있더라구요.
그래서 이번에는 애드센스 광고를 반응형에 맞게 수정해보았습니다.

CSS상으로는 크게 어려움이 없을 것 같지만 구글 애드센스의 정책에 따라 css를 수정하지 않으면 다시 광고가 중단되기 때문에 구글 정책을 확인해야합니다.
애드센스 광고 코드 수정을 보면 제가 신경써야할 부분은 "어떤 경우라도 광고 단위를 숨기는 행위(예: display:none)"인데, "반응형 광고 단위를 구현하는 경우 제외"라고 되어있네요.
추가적으로 반응형 광고 코드 수정 방법을 읽어보았습니다.

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> 

코드를 보니 구글에서 제공하는 코드에 class 명을 지정하고, 해당 클래스로 반응형 css를 적용하면 된다고 합니다.

<div id="ad1" class="adsense aside_item">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- kurien.net aside -->
    <ins class="adsbygoogle"
        data-ad-client="ca-pub-4805042826277102"
        data-ad-slot="7162985985"></ins>
    <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

제 블로그에 있는 광고의 경우 ad1이라는 id를 가진 div 태그로 감싸져있기 때문에 별도의 class는 주지 않았습니다.
대신 #ad1 > .adsbygoogle과 같은 형태로 css를 입력했습니다.

/* 작은 화면 */
#ad1 {
    display: none;
}
#ad1 > .adsbygoogle {
    display: none;

/* 큰 화면 */
@media (min-width: 992px) {
    #ad1 {
        display: block;
        margin: 0 auto;
    }

    #ad1 > .adsbygoogle {
        display: inline-block;
        width: 250px;
        height: 250px;
    }
/* 매우 큰 화면 */
@media (min-width: 1200px) {
    #ad1 > .adsbygoogle {
        width: 336px;
        height: 280px;
    }
}

저는 폰과 같은 작은 화면에서는 메뉴의 광고가 나타나지 않게 했고,
큰 화면(데스크탑에 보여줄 화면)에서는  250px * 250px의 형태로,
매우 큰 화면에서는 336px * 280px의 형태로 보여줄 수 있도록 수정했습니다.

위 과정을 처리하고 나니 카테고리 위의 광고가 정상적으로 꽉차게 나옵니다.

post 영역의 경우 300px * 200px의 광고로 수정해두었으나 광고가 많지 않아 240px * 200px로도 나타나는 것 같습니다.

아이패드에서도 깔끔하게 잘 뜨네요.

휴대폰에서는 300 * 200으로 지정해두었으나 광고쪽 스크립트가 강제로 확대하여 출력합니다...
다행히 레이아웃이 틀어지거나 하는 현상은 없어서 일단 그대로 두려고 합니다.

대부분의 광고가 사이즈에 맞게 나오거나 디자인을 크게 해치지는 않으니,
일단 이 정도로 작업하고 추후에 또 다른 개선방안이 있는지 알아보도록 하겠습니다.