애드블록 플러스 | 2011.01.17 10:02



마우스로 광고 영역을 쉽게 숨길 수 있는 편리한 사용자 인터페이스
요소 숨김 필터를 쉽게 작성할 수 있도록 돕는 애드블록 플러스의 보조 확장 프로그램!




1. 명칭
정식 명칭은 "Element Hiding Helper for Adblock Plus (엘리먼트 하이딩 헬퍼 포 애드블록 플러스)"이며, 줄여서 EHH로 표기하기도 합니다. 하지만 정식 명칭은 글자수가 너무 많고, 표기하기도 어려워 '요소 숨김 도우미'라는 한글 명칭을 일반적으로 사용합니다.

2. 소개
요소 숨김 도우미는 요소 숨김 필터를 더욱 쉽게 작성할 수 있도록 도와주는 애드블록 플러스의 보조 확장 프로그램입니다. 숨기려는 요소를 마우스로 선택한 후 향후 요소를 숨길 때 필요한 속성을 지정하면 요소 숨김 필터가 생성되어 자동으로 필터 목록에 추가됩니다.

  • 단순하지만 강력한 인터페이스
    필터를 키보드로 작성하는 대신에 마우스로 화면의 요소를 선택한 후 필요한 속성을 선택하는 인터페이스를 지원함. 특히 아르드바르크(Aardvark)의 기능을 요소 숨김 도우미에 접목하여 요소 선택 및 소스 확인 등 유용한 기능을 구현함. 결국 포인트 앤드 클릭(Point-and-click) 인터페이스 덕분에 페이지의 소스 코드를 보지 않고도 누구나 쉽게 올바른 필터를 작성할 수 있음.

  • 필터 적용 효과의 미리보기
    필터를 작성하는 동안 웹 페이지를 새로 고치지 않아도 필터 적용 효과를 미리 볼 수 있음.

  • 고급 필터 작성 모드
    속성의 일부분을 선택자로 지정, 사용자 정의 CSS 선택자 지원, 부모/형제 노드의 속성을 이용할 수 있음.

  • 고급 환경 설정 지원
    요소 숨김 도우미의 모든 설정은 extensions.elemhidehelper.* 형태로 저장되어 about:config로 설정 변경 가능


아르드바르크(Aardvark)는 화면을 보면서 페이지 구성 요소에 특정 효과를 줄 수 있는 파이어폭스 확장 프로그램입니다. 마우스를 움직이면 마우스 커서가 위치한 요소에 빨간 테두리가 표시되며 HTML 요소의 종류, id/class 이름이 노란 캡션 형태로 덧붙어 선택하려는 요소 정보를 쉽게 식별할 수 있습니다.

아르드바르크(Aardvark) : [바로가기]      ※ Aardvark [ɑːrdvɑːrk] : 땅돼지


3. 설치
요소 숨김 도우미는 2가지 버전이 존재합니다. 정식 버전은 일반적으로 설치하는 버전이고, 개발 빌드는 향후 추가될 새로운 기능이 포함되고, 버그가 수정되어 설치를 권장하는 버전입니다. 개발 빌드가 개발 단계에 있는 버전이라고 하지만 안정성 측면에 신뢰성이 높고, 자주 업데이트할 수 있는 이점이 있습니다. 한편 이 확장 프로그램은 독립적으로 실행할 수 없으며, 애드블록 플러스(Adblock Plus)가 설치되어 있어야 활성화되어 사용할 수 있습니다.
  - 정식 버전 : 바로가기
  - 개발 빌드 : 바로가기 (권장)


4. 요소 숨김 필터의 형태

example.com##*#sponsorad
example.com##div#sponsorad
example.com###sponsorad
example.com##div.textad
example.com##H2
example.com##table[width="80%"]
example.com##div[title*="adv"]
example.com##div[title^="adv"][title$="ert"]
example.com##table[width="80%"][bgcolor="white"]
example.com##div.adheader + *


요소 숨김 필터는 근본적으로 CSS 선택자로서 연속된 2개의 샵 기호를 포함하며, 필터의 적용 범위를 한정하는 도메인이 선택적으로 선행합니다. 일반적으로 애드블록 플러스는 도메인을 한정해야 최적화되므로 거의 대부분의 요소 숨김 필터는 도메인을 포함하고 있습니다.

##선택자
도메인##선택자


5. 요소 숨김의 원리
요소 숨김(Element Hiding)은 CSS에 기반해 미리 정의한 속성 조건으로 숨기려는 영역을 지정하고, 강제적으로 보이지 않게 하는 방식입니다. HTML 요소를 숨기기 위해 애드블록 플러스는 사용자 스타일시트를 웹 페이지의 CSS 코드에 덮어씁니다. 달리 말하면 선택된 HTML 요소의 "display" 속성을 변경함으로써 요소를 숨깁니다. 이 과정에서 요소 숨김 필터는 CSS로 변환되며, 사용자가 방문하는 모든 웹 페이지에 적용됩니다.

stylesheetURL = "data:text/css," + encodeURIComponent(expression + "{display: none !important;}");
expression = domainData.selected + "##" + expression;


예를 들어 example.com##div#evil_ad와 같은 필터는 다음과 같이 CSS로 변환됩니다.

@-moz-document domain(example.com)
{
  div#evil_ad, div.evil_ad
  {
    display: none !important;
  }
}


  • @-moz-document : CSS 표준으로 제안된 확장이며, 모질라 개발자 센터에서 더 많은 정보를 참고하십시오.
  • display: none : 'display' 속성의 값을 'none'으로 설정하면 태그가 HTML 문서 상에 존재하지 않는 것과 같이 되므로 요소가 표시되지 않습니다.
  • !important : 웹 문서의 요소들은 우선 순위에 따라 스타일이 적용되며, 스타일을 정의할 때 !important를 넣어주면 적용 위치에 상관없이 가장 먼저 적용됩니다.


필터는 일종의 CSS 선택자로서 div#evil_ad처럼 아이디 속성이 evil_ad인 div 요소를 스타일 적용 대상으로 정의하고 있습니다. 내부 작동 원리에 의해 지정된 요소에 일괄적으로 display: none !important;라는 스타일 속성과 값을 적용합니다. 즉, 요소 숨김은 필터에서 정의된 HTML 요소에 HTML 요소를 표시하지 않는 스타일을 적용합니다.

6. 요소 숨김 필터의 작성

1. 요소 선택
요소 선택은 숨기려는 요소를 지정하는 단계입니다. 복잡한 DOM을 조사하지 않아도 광고 영역 위에 마우스 커서를 위치시킨 후 선택 영역 확대/축소/기타 기능을 통해 숨기려는 요소를 결정합니다.

요소 숨김 도우미를 설치하면 ABP 툴바 아이콘의 문맥 메뉴에 '숨기려는 요소 선택'이라는 항목이 생성됩니다. 숨기려는 광고가 있는 웹 페이지에서 '숨기려는 요소 선택'을 클릭하면 아르드바르크 기술에 의해 '단축키 설명'이 나타납니다. 그리고 마우스 커서가 위치한 요소에는 빨간 테두리가 표시되는 동시에 대표적인 요소 정보가 탭에 나타납니다. 

요소 선택 단축키

  • 요소 선택 (S) : 숨기려는 요소를 선택하는 명령입니다. 요소를 선택할 때 보통 마우스 왼쪽 버튼을 누르지만 요소간의 간격이 좁을 때는 마우스가 흔들려 선택하려는 영역보다는 단축키가 유용합니다.
  • 선택 영역 확대/축소 (W/N) : 커서가 위치한 요소를 기준으로 선택할 요소의 영역을 상위 요소로 확대하고, 이를 다시 하위 요소로 축소합니다. 요소 선택 단계의 단축키 중에서 가장 활용도가 높으므로 기억해둘 것을 권장합니다. 비슷한 크기의 여러 상위/하위 요소가 같은 영역에 있을 때 마우스로 숨기려는 요소 영역의 확대/축소하는 일은 상당한 집중력이 필요합니다. 그래서 마우스 대신에 단축키로 영역을 확대/축소하면 정확하고, 빠르게 영역을 지정할 수 있고, Shift+마우스휠로도 선택 영역을 확대/축소할 수 있습니다.
  • 선택 영역 잠금/해제 (L) : 숨기려는 요소 영역을 고정시킵니다.
  • 선택 중지 (Q) : 요소 선택을 그만 두는 것이며, 단축키 Q 외에 ESC 키를 눌러도 됩니다.
  • 요소 깜빡임 (B) : 여러 요소가 페이지의 같은 영역에 서로 포개져 위로 쌓여 있을 때 선택한 하나의 요소를 임시로 숨길 때 유용합니다. Blink [blíŋk] : 깜박이다
  • 소스 보기 (U) / (별도 창) (V) : 소스 보기는 선택 영역과 하위 영역의 요소를 시각화하여 요소의 구조를 확인할 수 있고, 별도 창으로 확인하는 소스 보기 명령은 일반적인 텍스트 편집 상태로 보여줍니다.
  • 단축키 설명 보기/숨김 (H) : 단축키 설명을 숨기거나 표시하며, 단축키 H를 누르거나 단축키 설명 자체를 마우스로 클릭하여 단축키 설명을 숨깁니다.


[고급 환경 설정] 단축키 설명을 항상 숨기기
설정 이름 : extensions.elemhidehelper.showhelp
값 : false-숨기기 (true-기본값)

[고급 환경 설정] 요소 선택의 단축키 변경
설정 이름 : extensions.elemhidehelper.selectelement_key
Ctrl-Shift-S will be used if Ctrl-Shift-K is taken (e.g. in Firefox 4)


2. 필터 작성

필터 작성기의 구성 = 새 필터, 도메인, 선택자



2-1. 새 필터
새 필터는 필터 목록에 추가될 필터로서 도메인과 선택자의 조합입니다. 도메인 또는 선택자를 변경하면 새 필터에 반영되어 추가될 요소 숨김 필터를 미리 확인할 수 있습니다.

2-2. 도메인
도메인 그룹에서 필터가 적용될 호스트 이름 또는 도메인 이름을 지정합니다.

[고급 환경 설정] 도메인 그룹에서 기본적으로 선택되는 도메인을 설정함
설정 이름 : extensions.elemhidehelper.composer_defaultDomain
값 : 호스트 전체 이름이 www.foo.example.co.kr이라면 다음 값으로 미리 선택될 도메인을 지정할 수 있습니다.
    0 : 모든 도메인
    1 : co.kr (최상위 도메인 이름만)
    2 : example.co.kr (2단계 도메인 이름)
    3 : foo.example.co.kr (접두사 www를 제외한 호스트 전체 이름)
    -1 : www.foo.example.co.kr (변경되지 않은 호스트 전체 이름)



2-3. 선택자
선택자는 근본적으로 CSS 선택자이므로 다음과 같이 표현할 수 있습니다.

 E {display: none !important;}


E 선택자의 조건에 맞는 특정 요소에 속성과 값으로 {display: none !important;}를 적용합니다. 애드블록 플러스는 선택자의 조건에 맞는 HTML 요소에 요소를 숨길 수 있는 속성/값을 적용합니다. 따라서 '선택자'는 숨기려는 특정 요소를 탐색하기 위해 정의된 요소의 속성 조건입니다. 그리고 그것은 단순한 요소 이름에서부터 요소 관계 속성을 갖는 선택자의 조합에 이르기까지 다양합니다.

선택자의 구성

 선택자 = 속성 목록 + DOM 트리(고급 모드)


2-3-1. 속성 목록 
속성 목록은 선택자에 사용되는 제안된 요소 속성 항목들을 의미합니다. 속성 항목을 지정하면 새 필터에 자동으로 반영됩니다. 그리고 속성 목록의 개별 항목은 '사전에 구문 분석된 문자열 표현(pre-parsed text representation)'으로부터 생성됩니다. '사전에 구문이 분석된 문자열 표현'은 생성자에 들어가는 매개 변수로서 필터가 적용될 도메인 다음에 태그 이름/속성 규칙 또는 CSS 선택자가 있습니다. 생성자가 호출되기 전에 필터의 텍스트에서 이러한 부분들의 추출은 완료됩니다.

  1. 기본 선택자 = 공통 선택자, 타입 선택자, 아이디 선택자, 클래스 선택자
  2. 속성 선택자 = 속성 선택자
  3. 고급 선택자 = 하위 선택자, 자식 선택자, 인접 선택자, 첫 번째/마지막 자식, 사용자 정의 CSS


2-3-1-1. 기본 선택자
요소의 특징을 가장 잘 나타내는 기본 선택자는 브라우저에서 가장 효율적으로 처리됩니다.
  • 태그 이름 : 체크/해제에 따라 CSS의 공통 선택자/태그 선택자로 전환됩니다. 태그 이름은 아이디 또는 클래스 속성이 존재하면 요소 숨김 필터를 최적화하기 위해 기본적으로 체크가 해제됩니다.
       - 공통 선택자(*) : 문서의 모든 요소를 의미합니다.
       - 타입 선택자 : 문서에서 특정 HTML 태그에 해당하는 요소를 의미합니다. 타입 선택자는 아이디와
       - 타입 선택자 : 클래스의 속성을 이용하지 않을 때 보통 다른 선택자와 함께 사용됩니다.
       - 타입 선택자 : 예) ##body, ##div, ##label, ##p, ##script, ##h3
  • 아이디(#) : 아이디(id) 선택자. 문서에서 특정 아이디에 해당하는 요소를 의미합니다. 문서 내에서 고유한 식별 속성이며, 스타일 적용의 우선 순위가 가장 높습니다.
  • 클래스(.) : 클래스(class) 선택자. 문서에서 특정 클래스 이름에 해당하는 요소를 의미합니다. 여러 개의 요소에 적용 가능하며, 아이디 선택자만큼 중요한 선택자입니다.


웹 페이지의 텍스트 형태의 광고는 차단 방식으로는 제거할 수 없고, 전혀 다르게 작동하는 숨김 방식에 의해 제거해야 합니다. 예를 들어 웹 페이지의 소스를 살펴보면 3개의 텍스트 광고가 있습니다. 이들 텍스트 광고는 div라는 공간을 정의하는 HTML 태그로 구성되어 있습니다.

<div class="textad">
<span>광고1</span>
<div>
<div id="sponsorad">
<span>광고2</span>
<div>
<textad>
<span>광고3</span>
</textad>


  광고1
  광고2
  광고3


  • ##div.textad : 광고1을 숨김(텍스트 광고는 Class 속성이 textad인 div 요소를 숨김)
  • ##div#sponsorad : 광고2를 숨김(텍스트 광고는 id 속성이 sponsorad인 div 요소를 숨김)
  • ###sponsorad : 광고3을 숨김(요소의 이름을 특정할 필요없이 요소 이름만으로 요소를 숨김)

요소 숨김 필터는 ## 기호를 포함하며 그 나머지는 부분은 숨기려는 요소를 식별하는 선택자입니다. 그리고 ## 기호 앞에는 보통 필터를 한정적으로 적용할 수 있는 도메인이 붙습니다.


2-3-1-2. 속성 선택자
속성 선택자는 요소의 특징을 가장 잘 나타내는 기본 선택자에 비해 덜 일반적이지만 기본 선택자와 함께 기본 모드를 구성하는 주요한 속성입니다. 텍스트 광고에 아이디나 클래스 속성이 존재하지 않거나 아이디나 클래스 속성을 속성 선택자로 변환해 적용 범위를 넓히기 위해 주로 사용합니다.

선택자 구문
속성/값의 전체 또는 부분을 지정할 수 있습니다.

  • E[foo="bar"] : 'foo'라는 속성과 'bar'라는 값을 갖는 요소 E를 의미합니다.
  • E[foo^="bar"] : 'foo'라는 속성과 'bar'로 시작하는 값을 갖는 요소 E를 의미합니다.
  • E[foo$="bar"] : 'foo'라는 속성과 'bar'로 끝나는 값을 갖는 요소 E를 의미합니다.
  • E[foo*="bar"] : 'foo'라는 속성과 'bar'를 포함하는 값을 갖는 요소 E를 의미합니다.
  • E[foo~="bar"] : 'foo'라는 속성과 공백으로 분리된 여러 값 중 'bar'라는 값을 포함하는 요소 E를 의미합니다.


요소 숨김 도우미는 속성 선택자의 적용 범위를 손쉽게 변경할 수 있도록 자동 편집 기능을 지원합니다. 속성 항목에 있는 문자열을 부분적으로 지우기만 해도 알맞은 형태의 속성이 새 필터에 자동으로 반영됩니다.



1. 아이디나 클래스 속성이 존재하지 않음
숨기려는 HTML 요소에 아이디나 클래스 속성이 없고 명시된 속성만 있다면 하나 이상의 속성/값을 이용할 수 있습니다. 예를 들어 width 속성이 80%이고, bgcolor 속성이 white로 설정된 표를 숨기려면 여러 속성을 조합해 필터를 작성합니다.

example.com##table[width="80%"][bgcolor="white"]


2. 아이디나 클래스의 속성이 존재하지만 적용 범위를 넓히기 위해 속성 선택자로 변환함
속성의 전체 값을 특정하지 않는 경우 속성 값의 일부분만으로도 필터를 작성할 수 있습니다.

  • [id^="foo"] : 아이디 속성과 'foo'로 시작하는 값을 갖는 요소를 의미합니다.
    예) ##div[id^="ads_"] : id 속성이 "ads_"로 시작하는 div 요소를 숨김
  • [id$="foo"] : 아이디 속성과 'foo'로 끝나는 값을 갖는 요소를 의미합니다.
    예) ##table[class$="-ad"] : class 속성이 "-ad"로 끝나는 표 요소를 숨김
  • [id*="foo"] : 아이디 속성과 'foo'를 포함하는 값을 갖는 요소를 의미합니다.
  • [class~="foo"] : 클래스 속성이 공백으로 분리된 여러 값 중 'foo'라는 값을 포함하는 요소를 의미합니다. 이 선택자는 권장하지 않으며, '.foo'처럼 단축 형태를 사용할 수 있습니다.
       - 일치 : "foo", "foo bar", "bar foo baz"
       - 불일치 : "foobar", "bar foobaz"


※ 참고 : 속성 값의 일부분으로 작성된 필터는 일본 구독 필터인 "Japanese General Filter"를 참고하십시오.

2-3-1-3. 고급 선택자
기본/속성 선택자 이외에 모든 선택자는 고급 선택자로 분류되며, 기본/속성 선택자를 이용할 수 없는 특별한 경우에 사용합니다. 요소 숨김 도우미는 단순화된 'DOM 트리'를 지원하여 요소간의 관계에 의존하는 복잡한 선택자를 작성할 수 있습니다. CSS에서 복합 선택자에 해당하는 하위 선택자, 자식 선택자, 인접 선택자 등을 주로 의미하며, 가상 클래스인 첫 번째/마지막 자식을 함께 사용하기도 합니다. 그리고 사용자 정의 CSS 속성 항목은 CSS의 다양한 구문을 지원합니다. 하지만 고급 선택자는 단순 선택자를 조합한 복잡한 구문이므로 페이지 로딩 속도 차원에서 권장하지는 않습니다.

1. 고급 선택자의 형식

 ##단순 선택자 + 단순 선택자 + 단순 선택자 + ...


고급 선택자는 숨기려는 요소를 대상화하기 위한 관계성을 갖는 기본/속성 선택자의 조합입니다. 이때 개별 선택자를 '단순 선택자'라고 부르며 단순 선택자는 공백 문자, '>', '+'와 같이 조합해주는 기호인 결합자에 의해 관계성을 갖습니다. 숨기려는 요소는 가장 오른쪽에 있는 단순 선택자이며, 그외에 사용된 단순 선택자는 관계를 지정하는 역할을 합니다. 그리고 '단순 선택자 + *'와 같이 단순 선택자 대신에 사용된 '와일드 카드 문자(*)'는 '임의의 요소'를 의미합니다.

예를 들어 ##div#adheader > .banner는 클래스 속성이 banner인 요소를 숨기기 위해 아이디 속성이 adheader인 div 요소와 자식 관계에 있는 클래스 속성이 banner인 요소를 의미합니다.

##div#adheader > .banner


2. 고급 선택자의 종류

ㄱ. 하위 선택자 (E F) : 요소 E의 하위 노드에 해당하는 요소 F를 의미합니다.

 ##DIV LI

// Body
//   |- DIV
//   |- DIV             (상위 노드) : 숨기려는 요소의 상하위 관계를 형성하기 위해 지정한 요소
//        |- OL
//          |- LI     (하위 노드) : 숨기려는 요소


ㄴ. 자식 선택자 (D > E) : 요소 D의 자식 노드에 해당하는 요소 E를 의미합니다.

##OL > LI

// Body
//   |- DIV
//   |- DIV
//        |- OL         (부모 노드) : 숨기려는 요소와 부모 관계를 형성하기 위해 지정한 요소
//          |- LI     (자식 노드) : 숨기려는 요소


ㄷ. 인접 선택자 (E + F) : 요소 E의 바로 뒤 형제 노드에 해당하는 요소 F를 의미합니다. 즉, 형제 관계는 문서 트리에서 같은 부모 아래에 있는 일련의 2개 요소이며, 인접하기 때문에 선행하는 요소 바로 뒤에 오는 요소를 숨깁니다.

##LI + LI

// Body
//   |- DIV
//   |- DIV
//        |- OL
//          |- LI     (형 노드) : 숨기려는 요소와 인접한 형제 관계를 형성하기 위해 지정한 요소
//          |- LI     (동생 노드) : 숨기려는 요소


요소들의 복잡한 관계성을 표현하기 위해 위에서 언급한 하위/자식/인접 선택자는 조합해서 사용합니다.
예시 1 : DIV 요소 하위에 있는 OL 요소의 자식 요소인 LI 요소를 의미합니다.

##DIV OL > LI


예시 2 : 'foo'라는 아이디를 갖는 요소의 하위 요소 중 LI 요소 바로 뒤에 나오는 SPAN 요소를 의미합니다.
#foo LI + SPAN

ㄹ. 첫 번째/마지막 자식
첫 번째/마지막 자식은 가상 클래스 선택자로서 요소에 클래스를 지정하지 않았지만 노드의 위치 조건을 이용하므로 가상의 클래스를 지정한 것처럼 제어 가능한 선택자입니다. 개별 요소를 식별하기 위해 요소 이름이나 속성/값, 아이디/클래스에 의존하지 않고도 어떤 요소의 첫 번째/마지막 자식 요소를 지정할 수 있습니다. 표의 열/셀과 목록의 항목처럼 지정할 수 있는 속성 항목이 없는 경우에도 자식 요소로서 첫 번째/마지막 위치 속성을 지정하면 요소는 특정화됩니다. 요소 숨김 도우미에서 첫 번째/마지막 자식은 가상 클래스로서 주로 타입 선택자와 함께 사용됩니다.
  • E:first-child : 요소 E의 첫 번째 자식 노드에 해당하는 요소를 의미합니다.
  • E:last-child : 요소 E의 마지막 자식 노드에 해당하는 요소를 의미합니다.


요소 숨김 필터 ##DIV:last-child OL:first-child > LI > LI:Last-child는 'LI:Last-child'를 숨기기 위해 'DIV:last-child OL:first-child > LI >'라는 관계성을 지정하고 있습니다. 첫 번째/마지막 자식은 개별 요소를 더욱 특정화 또는 조건화하는 역할을 하고 있습니다.

##DIV:last-child OL:first-child > LI > LI:Last-child

// Body
//   |- DIV             DIV:first-child
//   |- DIV         
//   |- DIV            DIV:last-child
//        |- OL        OL:first-child
//        |    |- LI    LI:first-child
//        |    |- LI    LI
//        |    |- LI    LI:last-child


ㅁ. 사용자 정의 CSS
제안된 모든 속성 항목이 아닌 :nth-child(n)와 같이 사용자가 정의한 CSS를 지정할 수 있습니다. 하지만 모든 CSS 구문을 지원하지 않습니다. 그리고 선택자에는 올바른 CSS 구문을 사용해야 하지만 애드블록 플러스는 선택자의 구문을 확인할 수 없습니다. CSS 구문이 틀린 선택자는 올바른 다른 필터에도 부정적인 영향을 끼칩니다. CSS 구문의 오류를 확인하려면 자바스크립트 콘솔을 이용하십시오.

사례) :nth-child(n)의 이용
':nth-child(n)'은 n 번째 자식을 의미하는 CSS 구문으로서 사용자 정의 CSS에 입력할 수 있습니다. 다섯 번째 요소를 숨기기 위해 ##.list_box와 같이 클래스 속성만 지정하면 두 번째 자식도 함께 숨겨지기 때문에 차단 오류가 발생하게 됩니다. 하지만 다섯 번째 자식이라는 속성도 함게 지정하다면 관계적 속성에 의존하지 않고도 다섯 번째 자식을 숨길 수 있습니다.

##DIV.list_box:nth-child(5)

// Body                 id               class
//   |- DIV             con_right          
//   |- HR         
//   |- DIV            con_right
//        |- DIV                         title            (첫 번째 자식)
//        |- DIV                         list_box      (두 번째 자식)
//        |- DIV                         ad_box      (세 번째 자식)
//        |- DIV                         title            (네 번째 자식)
//        |- DIV                         list_box      (다섯 번째 자식) : 숨기려는 요소


2-3-2. DOM 트리 (DOM tree)
단순한 구조의 사이트에서 대부분 효율적으로 선택자를 생성하지만 복잡하고 까다로운 사이트에서 고급 선택자를 이용해야 합니다. 고급 모드에서는 요소 관계 속성을 지정하기 위해 부모/형제 노드의 속성을 이용할 수 있는 단순화된 'DOM 트리'를 지원합니다. DOM(문서 객체 모델, Document Object Model)은 모든 것을 노드(Node)로 표현하며, HTML 문서의 각 요소 노드들을 트리 구조로 나타냅니다. 문서를 나무의 가지처럼 트리 구조로 표현하는 것은 부모/자식 관계, 형제 관계 등을 형성하기 때문에 문서의 내용을 쉽게 이해할 수 있습니다. 필터를 적용할 요소를 대상화하기 위해 아이디나 클래스처럼 명확히 식별할 수 있는 단순한 속성을 이용할 수 있지만 다른 요소를 기준으로 하여 상대적인 관계를 고려해 지정할 수도 있습니다.

DOM 트리를 이용하여 고급 선택자를 생성하는 방법은 먼저 요소를 선택한 후 속성 목록에서 숨기려는 요소의 속성을 지정합니다. 그리고 나서 DOM 트리에서 한 개 이상의 부모/형제 노드를 선택/클릭한 후 속성 목록에서 속성을 지정합니다. 

  1. 선택한 요소의 속성 지정
  2. DOM 트리에서 부모/형제 노드를 선택/클릭함
  3. 부모/형제 노드의 속성 지정



신고

댓글을 달아 주세요

  1. 위의 방법을 사용하면 필터링하기에 한결 편리하겠네요. 좋은 정보 감사합니다.

    2009.10.07 17:11 신고  | MOVE | EDIT/DEL | REPLY
  2. ㅁㅁ

    흘러흘러 여기까지 왔어요
    제가 원하는 기능이 고급선택자, DOM트리라는 것에 있는 것 같은데
    저는 자식의 요소를 확인해서 부모를 숨기길 원하거든요
    이것도 가능한가요?
    그리고 크롬에서는 아직 사용 불가능한 기능인가요?

    2010.12.28 05:07 신고  | MOVE | EDIT/DEL | REPLY
    • 모잘것없는 글을 읽어주셔서 고맙습니다.
      아쉽지만 크롬에서는 현재 지원하지 않는 기능입니다.

      선택하는 과정이 숨길 요소를 선택한 후 필터 작성 단계로 이어집니다. 그런데 숨길 요소를 선택하는 단계는 자식 요소를 숨기겠다는 의미이므로 숨기려는 요소는 이미 규정되어 버립니다. 또한 CSS를 분석하고 적용하는 순서/과정 등을 고려한다면 자식의 요소를 확인하여 부모를 숨기는 것은 불가능하다고 생각합니다. 고급 선택자를 작성하는 과정에서 '자식 요소의 확인 후 부모 요소 숨김' 방식을 고민하게 되었는지 개인적으로 궁금합니다. 혹시나 유용한 방식이라면 타당성을 검토한 후 개발자에게 건의를 해볼 수 있기 때문입니다.
      그리고 본문에서 수정/보완해야 할 부분이 있으면 말씀해주십시오 *^^*

      2010.12.28 18:31 신고  | MOVE | EDIT/DEL
  3. ㅁㅁ

    먼저 친절한 답변에 감사드립니다
    제가 뭘 알아서 하는건 아니고요... 애드블락이란 것도 어제 밤에 알았는데
    목적은 게시판에서 특정 문구가 들어간 게시물을 차단하기 위함이고
    테이블 태그에서 어느 셀 안에 있는 문구를 확인하여
    그 TD가 속해있는 TR을 차단하고 싶었거든요. 게시물 제목, 작성자, 작성일자, 조회수 등이 각각 다른 셀 안에 들어있어서 하나하나를 조건으로 잡긴 그렇고 하나만 캐치해도 한 번에 다 날릴 수 있으면 해서요
    글은 꼼꼼히 읽어봤는데 기본지식이 없다 보니 가능한 이야기인지 잘 모르겠네요..

    2010.12.28 16:32 신고  | MOVE | EDIT/DEL | REPLY
    • 답변을 해주신 부분을 살펴보니 애드블록 플러스를 광고 콘텐츠 차단이라는 보다 일반적 목적으로 이용하시려는 것으로 생각됩니다. 특정 문구를 통해 해당 tr이나 td를 없애는 것은 다음 프로그램이 더욱 적절할 듯합니다.
      1. 애드먼처(http://corset.tistory.com/52)라는 프로그램에서 텍스트 교체 기능 또는 자바스크립트 추가 기능이 가능합니다. 아마도 이 프로그램이 가장 적절할 듯합니다.
      2. 파이어폭스에도 스크립트로 통제할 수 있는 그리스몽키나 HTML 문서의 소스를 교체를 할 수 있는 확장 프로그램( https://addons.mozilla.org/ko/firefox/addon/6510/ )도 있습니다.
      3. 특정 확장 프로그램을 만드는 방법 : 예) 디시라이트 - http://oownim.tistory.com/11
      추가적으로 궁금한 점이 있으면 방명록을 이용해주십시오. http://corset.tistory.com/guestbook

      2010.12.28 18:36 신고  | MOVE | EDIT/DEL
Name   Password   Homepage   Secret

Post a Comment

 
부가 정보