📌 [티스토리 광고 꿀팁④] 모바일에서 광고 깨짐 없이 정리하는 방법

✨

광고를 넣었는데, 모바일에서 보면
너무 크거나, 화면을 튀어나가거나, 아예 잘려 보이는 경우 있지 않으셨나요?

이런 문제는 간단한 CSS 스타일링만 추가해줘도
훨씬 보기 좋게 정리할 수 있어요!

오늘은 광고가 모바일에서 자연스럽게 보이도록
직접 쓰는 CSS 스타일 예시를 함께 나눌게요 :)

---

✨ 시리즈 안내 박스 (공통)

<div style="background:#f8f9fa; padding:12px 16px; border-left:5px solid #4e73df; margin-bottom:20px; font-size:14px; line-height:1.5;">
  <strong>📌 티스토리 광고 꿀팁 시리즈</strong><br>
  ① 다이나믹 배너 삽입법<br>
  ② 카테고리별 광고 설정<br>
  ③ 글 길이 따라 광고 조절<br>
  ④ 모바일 광고 스타일링 (← 현재 글)<br>
  ⑤ 광고 상단 자동삽입 & 랜덤 출력
</div>

---

✨ 본문 내용

✅ 1. 광고 영역을 감싸는 div 만들기

<div class="ad-mobile-wrap">
  <!-- 여기에 쿠팡 광고 코드 삽입 -->
</div>

쿠팡 광고를 직접 넣는 <script> 부분은 이전 포스팅 참고

---

✅ 2. CSS에 아래 스타일 추가하기

HTML 편집 > <style> 태그로 삽입해도 되고,
스킨 편집 > CSS 탭에서 추가해도 좋아요!

.ad-mobile-wrap {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  margin: 16px 0;
}

.ad-mobile-wrap iframe {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
}

이렇게 하면 iframe 형태의 광고도 모바일 화면 너비에 맞춰 자동 조절돼요!
특히 쿠팡 캐러셀 배너는 무조건 iframe 형태라 꼭 필요해요.

---

✅ 3. 반응형까지 고려한 추가 팁 (선택사항)

@media screen and (max-width: 768px) {
  .ad-mobile-wrap {
    padding: 0 10px;
  }
}

→ 모바일 화면일 때 좌우 여백을 살짝 주면 더 안정적으로 보여요.

---

✨ 마무리 멘트:

같은 광고여도 디자인에 어울리게, 자연스럽게 보이게 하는 게
방문자 경험을 훨씬 좋게 만들어 줍니다!

다음은 광고를 글 상단에 자동으로 넣거나,
랜덤으로 여러 광고 중 하나를 출력하는 팁을 알려드릴게요 💡

---

✨ 고지 문구:

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

---

🌿 이 글은 ‘미온’의 아카이브 공간
[M.Lab – Motion & Life Archive]에 기록된 "유용한 정보" 입니다.
소소한 팁들이 당신의 하루에 도움이 되기를 바랍니다 :)