모바일에서 광고가 잘리지 않게 만드는Media Query 완벽 가이드

모바일에서 광고가 잘리지 않게 만드는
Media Query 완벽 가이드

CSS Media Query 하나로 PC와 모바일 어디서든 광고가 제대로 보이게 만드는 실전 방법

" Media Query를 제대로 쓰면, 모바일에서 광고가 잘리거나 레이아웃이 무너지는 문제를 원천 차단할 수 있습니다.

PC에서 멀쩡하던 사이트가 모바일에서 광고 배너가 화면 밖으로 튀어나가거나 글자가 겹치는 현상을 한 번이라도 겪어봤다면, 이 글이 바로 그 해답입니다.

Media Query란 무엇인가

CSS에서

Media Query

는 "화면 조건에 따라 다른 스타일을 적용하라"는 일종의 조건문입니다. 마치 옷 가게에서 S, M, L 사이즈별로 다른 옷을 내놓는 것처럼, 화면 크기별로 다른 디자인 규칙을 적용할 수 있습니다.

스마트폰, 태블릿, PC는 화면 크기가 다 다릅니다. 똑같은 옷을 아이에게도, 어른에게도 입히려 하면 당연히 어딘가 맞지 않습니다. Media Query는 각 기기에 맞는 "맞춤 사이즈"를 자동으로 골라주는 역할을 합니다.

기본 문법 구조

CSS

/* 기본 구조 */
@media screen and (max-width: 768px) {
  .ad-container {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

주요 Media Query 조건 유형

조건 키워드	설명	실전 예시
max-width	특정 너비 이하일 때 적용	모바일 스타일 지정에 주로 사용
min-width	특정 너비 이상일 때 적용	PC/태블릿 레이아웃 분기
orientation	가로/세로 방향 감지	태블릿 가로 모드 광고 조정
aspect-ratio	화면 비율 감지	와이드스크린 대응

왜 광고가 모바일에서 잘리는가

광고 배너가 모바일에서 잘리는 이유는 대부분

고정 픽셀(px) 단위로 광고 컨테이너를 잡아놓기 때문

입니다. PC 기준으로 width: 728px로 설정해두면, 화면 너비가 375px인 아이폰에서는 배너가 화면 밖으로 삐져나갑니다.

핵심 원인 3가지
① 광고 컨테이너를 고정 px로 설정  ② overflow: hidden 미설정으로 인한 레이아웃 붕괴  ③ viewport meta 태그 누락으로 브라우저 스케일 오작동

광고 잘림 현상 구조로 보기

PC 화면 (1280px) 광고 728px ✓ 정상 표시 본문 컨텐츠 정상 → 모바일 (375px) 광고 728px → 삐져나감 본문 밀림 광고 잘림! → 모바일+MQ (375px)광고 100%✓ 맞춤본문 정상해결!

위 구조를 보면 명확합니다. 광고 자체의 크기를 바꾸는 게 아니라,

광고를 담는 컨테이너를 Media Query로 유연하게 만드는 것

이 핵심입니다.

viewport meta 태그 필수 체크
아래 태그가 <head>에 없으면 모바일 브라우저가 PC 해상도로 렌더링해서 모든 반응형이 무력화됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

브레이크포인트(Breakpoint) 설계 방법

브레이크포인트는 "이 화면 너비를 기준으로 레이아웃을 바꿔라"는 분기점입니다. 숫자를 외울 필요는 없고, 실제 기기 패턴을 기반으로 3단계만 기억하면 충분합니다.

실전 브레이크포인트 기준 3단계

기기 타입	화면 너비 범위	주로 사용하는 광고 크기	Media Query 조건
📱 모바일	~767px	320×50, 300×250	max-width: 767px
📱 태블릿	768px~1024px	468×60, 728×90	min-width: 768px
🖥️ PC	1025px~	728×90, 970×250	min-width: 1025px

브레이크포인트를 너무 많이 만들면 오히려 관리가 복잡해집니다. 처음엔 모바일 / PC 딱 2개만 잡아도 80%의 케이스를 커버할 수 있습니다. 나중에 태블릿을 추가해도 늦지 않습니다.

모바일 퍼스트 vs 데스크탑 퍼스트

두 가지 접근 방식이 있습니다. 최근 트렌드는

모바일 퍼스트(Mobile First)

방식입니다. 기본 스타일을 모바일 기준으로 작성하고, 화면이 커질수록 min-width로 확장하는 방식입니다.

CSS — 모바일 퍼스트 방식 (권장)

/* 기본(모바일) 스타일 */
.ad-container {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .ad-container {
    max-width: 728px;
  }
}

/* PC 이상 */
@media (min-width: 1025px) {
  .ad-container {
    max-width: 970px;
  }
}

광고가 잘리지 않게 만드는 실전 코드

이제 실제로 광고 컨테이너를 어떻게 잡아야 하는지 코드로 보겠습니다. 구글 애드센스 기준으로 작성했습니다.

HTML 기본 구조

HTML

<!-- 광고 영역 기본 구조 -->
<div class="ad-wrap">
  <div class="ad-inner">
    <!-- 구글 애드센스 코드 위치 -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXX"
         data-ad-slot="XXXXXXXX"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  </div>
</div>

핵심 포인트: data-ad-format="auto"와 data-full-width-responsive="true" 이 두 속성을 꼭 넣어야 애드센스가 화면 크기에 맞게 광고 크기를 자동으로 조정합니다. 이것만 제대로 설정해도 잘림 현상이 크게 줄어듭니다.

CSS 반응형 광고 컨테이너 완전판

CSS — 광고 잘림 방지 완전판

/* 광고 전체 감싸는 외부 래퍼 */
.ad-wrap {
  width: 100%;
  overflow: hidden;   /* 핵심: 삐져나감 방지 */
  margin: 20px 0;
  text-align: center;
}

/* 실제 광고 들어가는 내부 컨테이너 */
.ad-inner {
  display: inline-block;
  max-width: 100%;
  width: 100%;
}

/* 모바일 (767px 이하) */
@media (max-width: 767px) {
  .ad-wrap {
    padding: 0 10px;  /* 좌우 여백으로 잘림 방지 */
  }
  .ad-inner {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* 태블릿 (768px ~ 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .ad-inner {
    max-width: 728px;
    margin: 0 auto;
  }
}

/* PC (1025px 이상) */
@media (min-width: 1025px) {
  .ad-inner {
    max-width: 970px;
    margin: 0 auto;
  }
}

가로 고정 광고(728×90)를 모바일에서 처리하기

일부 광고 네트워크는 고정 크기 광고를 제공합니다. 이때는 transform: scale()을 활용해 모바일에서 비율을 맞추는 방법도 있습니다.

CSS — 고정 크기 광고 모바일 대응

.ad-fixed {
  width: 728px;
  height: 90px;
}

@media (max-width: 767px) {
  .ad-fixed-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
  .ad-fixed {
    transform-origin: top center;
    /* 375px 기준: 375/728 ≈ 0.515 */
    transform: scale(0.5);
  }
}

💡 transform scale 주의사항
transform: scale()은 시각적 크기만 줄이고, 실제 DOM 공간은 원본 크기 그대로입니다. margin-top이나 height를 같이 조정해줘야 레이아웃 빈 공간이 생기지 않습니다.

구글 애드센스 승인을 위한 반응형 구조

구글 애드센스 심사에서 자주 탈락하는 이유 중 하나가 바로

모바일에서 레이아웃이 깨지는 것

입니다. 구글 심사봇은 PC뿐 아니라 모바일 환경도 함께 확인하기 때문에, 반응형 구조가 제대로 되어 있어야 승인 확률이 올라갑니다.

애드센스 승인을 위한 체크리스트

✅ <meta name="viewport"> 태그가 <head> 안에 있는가
✅ 모바일에서 광고가 화면 너비를 초과하지 않는가
✅ 광고와 콘텐츠가 명확히 구분되는가 (광고 라벨 권장)
✅ 페이지 로드 시 광고가 콘텐츠를 덮지 않는가
✅ 광고 영역 클릭 유도(클릭 베이트)가 없는가
✅ 1500자 이상의 오리지널 콘텐츠가 있는가

광고 배치 구조 예시 (반응형 블로그 기준)

HTML — 블로그 광고 배치 전체 구조

<!-- 상단 광고 (헤더 아래) -->
<div class="ad-wrap ad-top">
  <p class="ad-label">광고</p>
  <ins class="adsbygoogle" ...></ins>
</div>

<!-- 본문 콘텐츠 -->
<article class="content">
  <!-- ... -->

  <!-- 본문 중간 광고 -->
  <div class="ad-wrap ad-mid">
    <p class="ad-label">광고</p>
    <ins class="adsbygoogle" ...></ins>
  </div>

</article>

<!-- 하단 광고 -->
<div class="ad-wrap ad-bottom">
  <ins class="adsbygoogle" ...></ins>
</div>

구글이 보는 건 "이 사이트가 사용자에게 좋은 경험을 주는가"입니다. 광고가 아무리 많아도 콘텐츠가 방해받지 않고, 모바일에서도 멀쩡히 보인다면 통과 가능성이 훨씬 높아집니다.

자주 하는 실수와 해결법

실전에서 반응형 광고 작업을 하다 보면 같은 실수를 반복하는 경우가 많습니다. 대표적인 케이스 5가지를 정리했습니다.

실수 1 — overflow 설정 누락

광고 컨테이너에 overflow: hidden이 없으면 광고가 부모 요소 밖으로 튀어나가도 잘리지 않고 그냥 삐져나갑니다.

외부 래퍼에 반드시 overflow: hidden을 설정

하세요.

실수 2 — min-width와 max-width 혼용 오류

잘못된 예: @media (min-width: 768px) and (max-width: 767px) → 이 조건은 절대 참이 될 수 없는 모순입니다. 꼼꼼히 범위를 확인하세요.

실수 3 — 인라인 스타일이 Media Query를 덮어씀

광고 스크립트가 자동으로 style="width: 728px" 같은 인라인 스타일을 삽입하는 경우가 있습니다. 이때 외부 CSS의 Media Query는 작동하지 않습니다. 이 경우 컨테이너 자체를 조정하거나, !important를 신중하게 사용해야 합니다.

실수 4 — 부모 요소의 overflow가 가로 스크롤을 만듦

어느 부모 요소든 overflow: auto나 overflow: scroll이 설정되어 있으면, 그 안에서 광고가 삐져나올 때 가로 스크롤바가 생깁니다. 전체 레이아웃에서 body나 html 레벨에 overflow-x: hidden 처리를 해두는 게 안전합니다.

CSS — 가로 스크롤 완전 차단

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

실수 5 — 크롬 모바일 에뮬레이터만 믿기

크롬 개발자 도구의 모바일 에뮬레이터는 편리하지만, 실제 기기와 100% 동일하지 않습니다. 특히 iOS Safari는 동작 방식이 달라서 반드시

실제 아이폰과 안드로이드 기기에서 직접 테스트

하는 습관이 필요합니다.

마무리 정리

핵심 요약 — 이것만 기억하면 됩니다

① viewport meta 태그를 빠뜨리지 않는다

② 광고 컨테이너 외부에 overflow: hidden을 설정한다

③ 고정 px 대신 max-width + 100% 조합으로 광고 영역을 잡는다

④ 애드센스는 data-full-width-responsive="true"로 자동 대응시킨다

⑤ 실제 모바일 기기에서 반드시 직접 테스트한다

처음엔 Media Query가 낯설고 뭔가 복잡해 보이지만, 원리는 간단합니다. "화면이 이 크기 이하면 이 스타일을 써라"는 조건 하나입니다. 광고 잘림 문제는 대부분 이 조건 하나와 overflow: hidden 두 가지면 해결됩니다.

웹이 복잡해 보여도, 결국은 기본기입니다. 기본을 제대로 잡아두면 어떤 기기에서도 흔들리지 않는 사이트를 만들 수 있습니다.

📚 참고 및 출처

저작자표시 비영리 동일조건 (새창열림)

'💻 IT 월드 > 💡 생활(웹ㆍ앱) IT 팁' 카테고리의 다른 글

버튼(CTA) 디자인 6가지-버튼이 클릭을 결정한다, SolidㆍOutlineㆍGlow·Pulseㆍ아이콘 + 화살표 버튼) (0)	2026.04.08
폰트 가독성 높이는 CSS 세팅 5가지(가독성, line-height 완벽 세팅, letter-spacing 완벽 세팅, (0)	2026.04.08
HTML 주석 처리 노하우: 나중에 봐도 이해되는 깨끗한 코드 관리법 (0)	2026.04.07
메타 태그 설정: 구글 검색 결과에서내 글이 클릭되게 만드는 마법 (0)	2026.04.07
이미지 최적화의 핵심: alt 속성과 용량 줄이기로 페이지 로딩 속도 개선하기 (2)	2026.04.06

⚡ 정보 부스터 <IT, 맛집투어, 여행을가자, 이모저모> 🚀

모바일에서 광고가 잘리지 않게 만드는Media Query 완벽 가이드

목차

기본 문법 구조

주요 Media Query 조건 유형

광고 잘림 현상 구조로 보기

브레이크포인트(Breakpoint) 설계 방법

실전 브레이크포인트 기준 3단계

모바일 퍼스트 vs 데스크탑 퍼스트

광고가 잘리지 않게 만드는 실전 코드

HTML 기본 구조

CSS 반응형 광고 컨테이너 완전판

가로 고정 광고(728×90)를 모바일에서 처리하기

구글 애드센스 승인을 위한 반응형 구조

애드센스 승인을 위한 체크리스트

광고 배치 구조 예시 (반응형 블로그 기준)

실수 1 — overflow 설정 누락

실수 2 — min-width와 max-width 혼용 오류

실수 3 — 인라인 스타일이 Media Query를 덮어씀

실수 4 — 부모 요소의 overflow가 가로 스크롤을 만듦

실수 5 — 크롬 모바일 에뮬레이터만 믿기

핵심 요약 — 이것만 기억하면 됩니다

📚 참고 및 출처

'💻 IT 월드 > 💡 생활(웹ㆍ앱) IT 팁' 카테고리의 다른 글

티스토리툴바

티스토리툴바

모바일에서 광고가 잘리지 않게 만드는Media Query 완벽 가이드

목차

기본 문법 구조

주요 Media Query 조건 유형

광고 잘림 현상 구조로 보기

브레이크포인트(Breakpoint) 설계 방법

실전 브레이크포인트 기준 3단계

모바일 퍼스트 vs 데스크탑 퍼스트

광고가 잘리지 않게 만드는 실전 코드

HTML 기본 구조

CSS 반응형 광고 컨테이너 완전판

가로 고정 광고(728×90)를 모바일에서 처리하기

구글 애드센스 승인을 위한 반응형 구조

애드센스 승인을 위한 체크리스트

광고 배치 구조 예시 (반응형 블로그 기준)

실수 1 — overflow 설정 누락

실수 2 — min-width와 max-width 혼용 오류

실수 3 — 인라인 스타일이 Media Query를 덮어씀

실수 4 — 부모 요소의 overflow가 가로 스크롤을 만듦

실수 5 — 크롬 모바일 에뮬레이터만 믿기

핵심 요약 — 이것만 기억하면 됩니다

📚 참고 및 출처

'💻 IT 월드 > 💡 생활(웹ㆍ앱) IT 팁' 카테고리의 다른 글

관련글

티스토리툴바

티스토리툴바