Created by Gemini

 

네이버 지식인 답변 하단에 아래와 같은 파워링크 광고가 뜹니다.

 

 

웹브라우저에서 Adblock , uBlock, Adguard 등으로 광고를 막을 때

화면에 보이는 특정 요소(Element)를 선택해서 차단하는 경우

기본적인 설정으로는 위 광고를 막지 못할 수 있습니다.

 

네이버 검색에서도 하단에 파워링크 광고가 뜹니다.

 

 

이런 파워링크 광고는 해당 요소를 선택해서 막기가 힘든데

그 이유는  id 이름이 계속 무작위로 바뀌기 때문입니다.

 

 

powerlink_kin_*같은 패턴으로도 막을 수 없습니다.

 

(물론 이 경우에는 kin.naver.com##.powerlink 라는 필터로 상위의 클래스인 powerlink 라는 class를 미리 차단하거나

kin.naver.com###powerlink_kin 라는 필터로 상위의 powerlink_kin 이라는 id를 차단해도 되긴 합니다.)

 

여기서는 아래처럼 특정 문자로 시작하는 모든 요소를 막는 방법을 사용할 수도 있습니다.

 

Adblock Plus 의 경우 설정 > 고급 에서 내 필터 목록에 아래 필터 규칙을 입력하고 '추가'를 누릅니다.

kin.naver.com##[id^="powerlink_kin_"]

 

  • kin.naver.com: 네이버 지식iN 도메인에만 적용합니다.
  • ##: Adblock Plus에서 요소 숨김(Hide)을 지정하는 구분자입니다.
  • [id^="powerlink_kin_"]: id 속성값이 powerlink_kin_으로 시작하는 모든 HTML 요소를 찾아서 제거합니다.

 

이 때 유용한 속성 선택자 팁입니다.

  • [id^="abc"] : id가 abc로 시작하는 요소 차단
  • [id*="abc"] : id 중간에 abc라는 단어가 포함된 모든 요소 차단
  • [id$="abc"] : id가 abc로 끝나는 요소 차단

 

 

 

이번 기회에 자주 쓰이는 핵심 필터 패턴을  Gemini가 일목요연하게 정리해 봅니다.

 

요소 숨김 규칙 (Cosmetic Filtering)

요청 자체를 차단하지 않고, HTML/CSS 요소를 화면에서 숨기는 규칙입니다. 규칙 중간에 ## 또는 #?#를 사용합니다.

[도메인]##[CSS 선택자]
  • 모든 사이트에서 특정 ID 숨기기 ##.ad-banner 또는 ###sidebar-ad
  • 특정 사이트에서만 특정 클래스 숨기기 example.com##div.sponsor-box
  • 속성 선택자 활용 example.com##iframe[src*="doubleclick"]
  • 예외 숨김 (#@#) example.com#@#div.sponsor-box (특정 사이트에서 요소 숨김 해제)

 

1. 특정 요소 숨기기 (CSS Element Hiding)

웹페이지 내의 텍스트, 이미지, 광고 박스 등 HTML 태그 자체를 눈에 안 보이게 hide 처리할 때 사용합니다. 기본적으로 도메인##선택자 구조를 가집니다.

종류 필터 패턴 예시 설명
클래스(Class) example.com##.ad-banner class="ad-banner" 인 요소를 숨김
아이디(ID) example.com###main_ad id="main_ad" 인 요소를 숨김
모든 사이트 적용 ##.global-ad-box 도메인을 생략하면 모든 웹사이트의 해당 요소를 숨김
쉼표 연산자 example.com##.ad1, .ad2 여러 요소를 한 번에 지정할 때 사용

 

참고로 #이 id를,  점(.)이 class를 나타내게 된 이유는 아래와 같은 전통적인 HTML규칙에서 유래합니다.

기호 대상 고유성 기호 선택의 역사적 배경
# id 단 하나 (유일) 기존 URL의 앵커(Anchor) 기호(#)에서 유래.
찾아갈 고유 주소를 뜻함.
. class 여러 개 (중복 가능) 프로그래밍/문장 표기법에서 속성이나 그룹을 나타내는 간결한 기호로 채택.
계층 구조이므로 parent.child.grand-child 형태도 가능

 

2. 와일드카드 속성 선택자 (가장 유용한 패턴!)

이번에 사용한 패턴처럼 클래스나 ID 이름이 랜덤으로 바뀌거나 길 때 사용하는 필터입니다.

kin.naver.com##[속성명^="값"]  --> ~로 시작하는
kin.naver.com##[속성명*="값"]  --> ~를 포함하는
kin.naver.com##[속성명$="값"]  --> ~로 끝나는

실제 사용 예시

  • 시작값 기준 (^=): example.com##[id^="ad_frame_"]
    • id="ad_frame_123", id="ad_frame_abc" 모두 차단
  • 포함 기준 (*=): example.com##[class*="sponsor"]
    • class="top-sponsor-inner", class="news_sponsor" 등 sponsor가 들어간 모든 클래스 차단
  • 끝값 기준 ($=): example.com##[src$=".gif"]
    • 이미지 주소가 .gif로 끝나는 요소 차단

 

 

3. 네트워크 요청 차단 (URL Blocking)

아예 광고 서버에서 데이터(이미지, 스크립트, 영상 등)를 받아오지 않도록 네트워크 차원에서 막아버리는 패턴입니다. 페이지 로딩 속도를 높이는 데 효과적입니다.

  • 기본 URL 차단: ||[example.com/ads/](https://example.com/ads/)
    • http://, https://, sub.example.com 등 서버 주소 시작에 맞춰 [example.com/ads/](https://example.com/ads/)로 들어오는 모든 요청 차단
  • 와일드카드 (*): ||[example.com/banner/*/img.png](https://example.com/banner/*/img.png)
    • 중간에 어떤 경로가 들어가든 일치하면 차단
  • 정확한 영역 구분자 (^): ||doubleclick.net^
    • doubleclick.net 바로 뒤에 포트 번호, /, ? 등이 오는 완벽한 도메인 끝자리를 의미 (잘못해서 doubleclick.net.example.com 같은 정상 사이트가 막히는 것을 방지)

 

필터 규칙 뒤에 $를 붙여 차단할 리소스 유형이나 대상을 제한할 수 있습니다. (여러 옵션은 쉼표 ,로 구분)

||example.com/ads/*$script,image,domain=targetsite.com

자주 쓰이는 주요 옵션

  • type 옵션 (리소스 분류):
    • script: 자바스크립트 파일
    • image: 이미지 파일
    • stylesheet: CSS 스타일시트
    • xmlhttprequest (또는 xhr): AJAX 요청
    • popup: 팝업 창
  • domain 옵션 (특정 사이트 제한):
    • domain=example.com: example.com 사이트 내에서만 적용
    • domain=~example.com: example.com 사이트를 제외한 모든 곳에서 적용
    • domain=siteA.com|siteB.com: 여러 사이트 지정
  • third-party 옵션:
    • third-party: 제3자 도메인(타사 광고 서버 등)에서 불러오는 리소스만 차단
    • ~third-party: 해당 사이트 자체(자회사) 리소스만 차단

 

4. 예외 처리 (Whitelist / Allow)

특정 사이트에서 광고 차단을 끄거나, 잘못 막힌 요소를 다시 보이게 복구할 때 사용합니다. 기본 패턴 앞에 @@를 붙입니다.

  • 특정 사이트 전체 차단 해제: @@||example.com^$document
  • 특정 스크립트만 차단 예외: @@||[example.com/js/good_script.js](https://example.com/js/good_script.js)
  • 특정 요소만 숨김 예외: example.com#@#.not-an-ad (## 대신 #@# 사용)

 

 

💡 상황에 따른 요약 팁

  • 눈에 보이는 상자/텍스트만 깔끔히 지우고 싶다 $\rightarrow$ ##[class*="광고단어"] 또는 ##[id^="광고단어"]
  • 광고 서버 이미지/스크립트 로딩 자체를 막고 싶다 $\rightarrow$ ||ad-server.com^
  • 잘못 지워진 요소를 살리고 싶다 $\rightarrow$ #@# 또는 @@

 

 

💡 종합 예시

! (느낌표로 시작하는 것은 주석입니다)

! 1. badads.com의 모든 이미지 차단
||badads.com/*.png$image

! 2. mysite.com 접속 시 제3자 스크립트 차단
*$script,third-party,domain=mysite.com

! 3. news.com의 상단 광고 div 요소 숨기기
news.com##div#top_ad_container

 

 

 

'HTML,CSS,JS' 카테고리의 다른 글

티스토리 코드블럭에 Highlight.js 적용  (0) 2019.04.14