Xpath 와 CSS Selector 기본 문법

이번에 웹 크롤링을 하면서 Xpath, CSS Selector 를 사용해보게 되었다. 이를 통해 알게된 내용을 정리하려고 한다.

 

1. Xpath 란?

Xpath(XML Path Language)는 W3C의 표준으로 XML 문서의 구조를 통해 경로 위에 지정한 구문을 사용하여 항목을 배치하고 처리하는 방법을 기술하는 언어다. XML 표현보다 더 쉽고 약어로 되어 있으며, XML 문서의 Node를 정의하기 위하여 경로식(Path Expression)을 사용하며, 수학함수와 기타 확장 가능한 표현들이 있다. 

 

XPath 는 W3C의 권고 사항으로 견고한 표준이 확립되어 있고, 다양한 API와 함수, 경로식(Path Expression) 덕분에 유연성과 확장을 요하는 서버 통신이나 도큐먼트 출력, 기타 XML 을 사용하는 여러 분야에 널리 사용되고 있다. 

 

=> 크롬 개발자 도구에서 마우스 우클릭 시, 복사 -> 전체 XPath 복사를 클릭하면 쉽게 요소를 가지고 와서 크롤링에 사용할 수 있었다. 계속 id 가 바뀌는 요소를 가지고 올 시, 유용하게 사용했음. 

 

2. CSS Selector 란?

말 그대로 선택을 해주는 요소. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있다.

 

문법

 

1 클래스 vs ID

1) 클래스 선택자 (클래스 속성값이 myClass으로 지정된 요소를 선택)

.myClass

 

2) ID 선택자 (id 속성값이 myId 로 지정된 요소를 선택)

#myId

 

ID 선택자의 우선순위가 클랙스 선택자의 우선순위보다 높다. 

 

2 자식 vs 하위

1) 자식 선택자 (부모의 바로 아래 자식 요소만)

section > ul

 

2) 하위 선택자 (모든 하위요소)

section ul

 

3. 인접 형제 vs 일반형제 

1) 인접 형제 (앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택함)

section + ul

 

2) 일반 형제 

: 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택함. 두 요소가 서로 붙어있을 필요는 없음.

section ~ ul

 

(참고)

https://www.nextree.co.kr/p6278/

XPath 이야기

https://www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해

https://www.codingfactory.net/12644