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

웹브라우저에서 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 |
|---|
최근댓글