배너광고 안뜨게 하는 방법(데스크탑, 모바일 모두 한번에 확인)

폰을 열 때마다 생기는 배너광고 안 뜨게 하는 방법에 대해서 알아보겠습니다.
내가 찾고자 하는 글일 배너광고에 가려져서 가독성이 불편할 때가 많아서
저도 이 방법을 이용해서 배너광고를 가렸습니다~

 

 

목차

 

 

 

CSS 이용하는 방법은 어려운 방법이고, 한 번에 차단시키는 방법이 있습니다.

 

1️⃣ 배너광고 차단 CSS 코드 사용하기

웹사이트의 광고 배너를 숨기고 싶다면 CSS를 사용할 수 있어요. 아래 코드를 HTML 파일의 <style> 섹션에 추가하면 됩니다.

/* 광고 배너 차단 CSS 코드 */
.ad-banner, .ad-container, [id*="ad"], [class*="ad"], iframe[src*="ads"], ins.adsbygoogle {
display: none !important;
}

 

모바일 광고 한 번에 차단시키는 방법▼

광고 차단 일괄 적용시키기 ◀

 

2️⃣ HTML 내 특정 배너광고 영역 제거하기

HTML 파일에 직접 삽입된 광고는 해당 요소를 삭제하거나 display: none;으로 숨길 수 있어요.

<!-- 광고 배너 예시 -->
<div id="ad-banner">광고 영역입니다</div>

<!-- 광고 숨기는 방법 -->
<style>
#ad-banner {
display: none;
}
</style>

3️⃣ 브라우저 배너광고 차단 확장 프로그램 설치하기

데스크탑 광고 한 번에 차단시키는 방법▼

광고 차단 일괄 적용시키기 ◀

 

HTML과 CSS로 광고를 차단할 수 없을 때는, **Adblock**과 같은 광고 차단 확장 프로그램을 사용하는 것이 좋아요. 구글 크롬, 파이어폭스, 에지 브라우저에 추가할 수 있습니다.

 

 

 

4️⃣ 광고 차단에 유용한 스크립트 추가하기

자바스크립트를 활용해서 광고 배너를 자동으로 제거할 수도 있어요. 아래의 스크립트는 특정 광고 배너를 감지하고 제거합니다.

<script>
// 특정 광고 요소를 자동으로 제거하는 스크립트
const removeAds = () => {
const adSelectors = [ ".ad-banner", ".ad-container", "[id*='ad']", "[class*='ad']", "iframe[src*='ads']", "ins.adsbygoogle" ];
adSelectors.forEach(selector => {
document.querySelectorAll(selector).forEach(adElement => adElement.remove());
});
};
// 페이지 로딩 후 광고 제거
window.onload = () => removeAds();
</script>

5️⃣ 기타 팁

• **광고 요소를 숨기기**: 광고의 클래스명이나 id를 확인하고 display: none;을 적용하세요.
• **Adblock 설치하기**: Adblock, uBlock Origin 같은 광고 차단 브라우저 확장을 사용하면 광고 차단이 더 쉬워요.
• **VPN 사용하기**: 일부 광고는 지역에 따라 다르게 표시되므로 VPN을 사용하면 광고 유형이 달라질 수 있어요.

📢 요약하자면.

배너 광고는 CSS, 자바스크립트, 브라우저 확장 프로그램을 통해 쉽게 차단할 수 있어요. 특히, HTML과 CSS를 직접 수정할 수 있는 경우에는 위의 코드 예시를 참고해 광고를 차단할 수 있습니다.

더 강력한 광고 차단이 필요하다면 Adblock이나 uBlock Origin 같은 브라우저 확장 프로그램을 추천드립니다.