-
HTML XPath 알아보기 - 기본 사용법, 주의사항, 활용 🎶기타 2025. 5. 9. 22:11
웹 크롤링이나 자동화 작업을 하다 보면 "HTML에서 원하는 요소를 어떻게 정확히 찾아야 하지?" 라는 고민을 하게 될 때가 있다.
이때 사용할 수 있는 것이 바로 XPath다
오늘은 HTML 문서에서 XPath를 이용해 요소를 선택하는 방법과, 실제 사용 예제, 그리고 주의해야 할 점 및 활용 방안까지 알아보았다.
XPath란 무엇인가 🤔
XPath는 "XML Path Language"의 줄임말로, XML 문서 안에서 원하는 노드를 찾아내기 위한 경로 표기법이다.
HTML은 기본적으로 XML처럼 계층 구조(Tree 구조)를 가지기 때문에, HTML 요소도 XPath로 탐색할 수 있다.
간단히 말하면,
"HTML 문서 안에서 어떤 요소를 찾아가는 길을 표기하는 언어"
라고 생각할 수 있다.
XPath 기본 문법 🍝
XPath는 간단한 규칙만 알면 금방 사용할 수 있다.
문법에 대한 간단한 설명은 다음과 같다./ 루트(root) 노드부터 탐색 /html/body/div // 문서 어디에서나 탐색 시작 //div (모든 div 찾기) . 현재 노드 . .. 부모 노드 .. @ 속성(attribute) 선택 //a[@href] (href 속성 있는 a 태그 찾기) [] 조건 //div[@class="content"] HTML에서 XPath 사용 예제
예를 들어 다음과 같은 HTML이 있다고 가정해보자.
<html> <body> <div class="content"> <h1>블로그 제목</h1> <p id="intro">환영합니다!</p> <a href="https://example.com">링크</a> </div> </body> </html>
이 문서에서 특정 요소를 찾는 XPath는 다음과 같다.- h1 요소 찾기
//div[@class="content"]/h1- id가 "intro"인 p 태그 찾기
//p[@id="intro"]- 링크 텍스트 가져오기
//a/text()
✨ text()를 붙이면 텍스트만 가져올 수 있다.
XPath 실제 활용법 🧃
크롬 개발자 도구로 XPath 쉽게 찾기
- 웹페이지 열고, 원하는 요소 위에서 우클릭
- 검사 클릭
- 요소 우클릭 → 복사 → "Path 복사" (전체 XPath, XPath 복사)
내 블로그의 요소로 xpath 찾기 그러면 브라우저가 알아서 XPath를 생성해준다
(ex. //*[@id="header_gnb"])
다만 자동 생성된 XPath는 길고 깨지기 쉬워서 꼭 수정해서 사용하는 게 추천된다.Python으로 XPath 사용하기
주로 크롤링에서는 lxml이나 selenium 같은 라이브러리로 XPath를 쓴다고 한다.
예시: lxml + requestsimport requests from lxml import html url = "https://example.com" response = requests.get(url) tree = html.fromstring(response.content) # XPath로 h1 태그 내용 가져오기 title = tree.xpath('//h1/text()') print(title)예시: Selenium
from selenium import webdriver driver = webdriver.Chrome() driver.get('https://example.com') # XPath로 a 태그 클릭 link = driver.find_element('xpath', '//a') link.click()XPath 쓸 때 주의해야 할 점
- 구조가 바뀌면 XPath가 깨진다
- HTML 구조가 조금만 변경되어도 XPath가 동작하지 않을 수 있다
- 가능하면 class명, id 같은 변하지 않는 속성을 기준으로 작성해야 된다
- 절대 경로(XPath)가 너무 길면 비효율적이다
- /html/body/div[2]/div[1]/ul/li[3]/a 이런 식으로 작성하면 유지보수가 힘들다
- 되도록 //를 활용해서 유연한 경로를 만들어야 한다
- 속성 값은 정확하게
- 대소문자 구분, 띄어쓰기 주의! @class="content " 처럼 공백 하나로도 매칭 실패할 수 있다
- XPath vs CSS Selector
- 간단한 선택에는 CSS Selector가 더 짧고 읽기 쉽다
- 복잡한 조건(부모 요소 따라가야 할 때 등)은 XPath가 강력하다
- 둘을 상황에 맞게 섞어 쓰는 게 좋다
XPath는 웹페이지에서 정확하게 원하는 데이터를 추출할 때 정말 강력한 도구이다.
하지만 너무 길거나 fragile한 경로를 만들면 쉽게 깨질 수 있으니, "최대한 짧고 견고하게" 만드는 게 중요하다고 한다
크롤링, 자동화 스크립트, 웹테스트를 할 때 XPath를 활용하면 효과적이다 🤣
🍹 참고 자료
https://www.w3schools.com/xml/xpath_syntax.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'기타' 카테고리의 다른 글
개발에서 자주 쓰이는 용어 정리 🧹 (0) 2025.10.01 Tistory 블로그 구글 서치 엔진 연결하기 (robots.txt, sitemap, SEO) 😘 (7) 2025.06.28 시멘틱 HTML, 제대로 써보기 🩶 & ARIA (Accessible Rich Internet Applications) (1) 2025.04.28 프론트엔드 개발과 Mocking (axios-mock-adapter, Mock Service Worker) (0) 2024.05.25 웹 성능 최적화를 위한 Critical CSS with 예제 (0) 2024.05.01