CSS Selector & XPath 개념 및 사용법

# 목적

CSS Selector와 XPath의 개념과 사용법을 확인하고, 예시 HTML 문서를 통해 몇가지 요소들을 CSS Selector와 XPath 방식으로 셀렉하는 방법을 정리하고자 한다.

# CSS Selector & XPath 개념

# CSS Selector

CSS는 HTML과 함께 웹 개발을 시작할 때 접하게 되는데, 웹 페이지를 구성하는 뼈대인 HTML 문서에 스타일을 입히는 언어이다.

CSS Selector는 CSS 스타일을 적용하기 위해 특정 HTML 요소를 선택하는 패턴이다.

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style> 
	    .example { color: red; } 
    </style>
</head>
<body>
    <div class="example">This is an example.</div>
    <div>This is another example.</div>
</body>
</html>

위 HTML 문서에서 style 태그 안의 ".example" 부분이 CSS Selector이다.

# XPath

XPath는 XML 문서의 요소 및 속성을 찾기 위한 표현 방법으로, HTML 문서에서도 사용이 가능하며 CSS Selector와 유사한 역할을 한다.

XML 문서는 데이터를 저장하고 전달하기 위한 마크업 언어로, 태그로 둘러싸인 요소들로 구성된다.

HTML과 동일하게 계층적으로 구조화될 수 있으며 각 요소는 시작 태그와 종료 태그로 둘러쌓여진다.

<bookstore> 
	<book category="cooking">
		<title lang="en">Everyday Italian</title>
		<author>Giada De Laurentiis</author>
		<year>2005</year>
		<price>30.00</price>
	</book>
	<book category="children">
		<title lang="en">Harry Potter</title>
		<author>J.K. Rowling</author>
		<year>2005</year>
		<price>29.99</price>
	</book>
</bookstore>

XPath는 위와 같이 계층적으로 구조화하고 태그로 둘러싸여 있는 XML 문서에서 요소 및 속성을 선택하기 위한 언어이다.

HTML의 구조 또한 태그로 둘러싸인 계층형 언어이기 때문에, 현재는 XPath 방식으로도 HTML Elements들을 셀렉을 하기 위해 사용된다.

# 기본 개념

# HTML

HTML Elements를 선택하는 방법을 정리하기 전에 HTML에 대해 필요한 부분만 간단하게 정리한다.

HTML 문서는 다양한 태그로 구성되고 태그를 기반으로 계층적 구조를 갖는다.

<ABC> </ABC>는 일반적으로 ABC 태그 혹은 ABC Element라고 부르고, 아무 문자나 짝을 맞추면 HTML 문법에 위배되진 않는다.

HTML에서는 몇가지 태그가 사전에 정의되어 있다.

텍스트를 강조할 때 사용되는 h1, h2, ~~ h6 태그
하이퍼링크를 정의하는 a 태그
구획을 정의하는 div 태그
이미지 요소를 정의하는 img 태그

등의 기본 태그가 존재한다.

각 태그 안에는 속성이라는 정보를 추가할 수 있다.

팀 컨벤션 혹은 자신만의 속성 정의하여 태그에 추가하고, 이를 CSS Selector로 지정하여 스타일을 입히게 된다.

대표적으로 사용하는 속성은 class, id, href 등이 존재한다.

<div id="example-text" class="container box hello"> 안녕하세요 \</div>

위의 div 태그는 class 속성 값으로 "container", "box", "hello" 을 갖고, id 속성 값으로 example-text를 갖는다.

# CSS Selector

CSS Selector 또한 몇가지 기본으로 제공되는 형식이 존재하고, 이를 응용해서 원하는 HTML Element를 선택할 수 있다.

Element 선택자

태그의 이름으로 선택하는 방식이다. div, p, a와 같이 HTML 태그의 이름을 사용하여 선택이 가능하다.

Class 선택자

Class 속성의 값으로 선택하는 방식이다. 클래스의 값(이름)은 '.'으로 시작하며, 두개 이상의 클래스일 경우 '.'을 이어 붙여서 클래스 명을 선택한다. Element 선택자와 결합하여 사용하면, 'p.box' 셀렉터는 box 클래스 값을 갖는 p 태그를 선택하게 된다.

ID 선택자

HTML 문서에서 ID 속성의 값은 유일하다. 즉, 모든 태그들 중에서 특정 ID 값은 단 하나의 태그만 사용할 수 있다.
ID 선택자는 #으로 사용이 가능한데, #example-text은 id 값이 example-text인 태그를 의미한다.

Attribute 선택자

임의의 속성과 값을 선택할 때 사용하는 패턴으로 대괄호 안에 속성 이름과 값을 지정하여 선택한다.
'div[name='value']'는 name이라는 속성이 'value'인 div 태그를 선택하는 패턴이다.

자식 선택자

특정 요소의 자식 요소를 선택하기 위해선 공백으로 요소 선택자를 나열하면 되는데, 아래와 같다.
'div p tr' 이는 div 태그 하위의 p 태그들 중에서 하위의 tr 태그를 선택한다.
비슷하지만 다른 방식으론 'div > p > tr' 패턴을 사용할 수 있다.

두 방식의 차이는 태그 사이가 직계여야하는지 아닌지에 있다.

첫번째 방식은 div 하위의 p 태그의 하위의 tr 태그를 선택하는 것이고, 두번째 방식은 div 직속 자식 중 p 태그의 직속 자식 중 tr 태그를 선택한다. 즉 '>' 문자로 직계를 선택할지 아닌지를 결정하게 된다.

전체 선택자

*을 통해 모든 Elements를 선택할 수 있다.

이 외에도 다양한 CSS Selector 패턴이 존재하는데, 아래의 사이트에서 자세하게 확인할 수 있다.

CSS Selectors Reference

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

# XPath 문법

Xpath에서는 일반적으로 노드를 선택한다고 표현하는데, XML 문서에서는 그렇게 표현하는 듯 하다.

HTML Elements를 선택한다는 목적에서 XPath에서의 노드가 CSS Selector의 Element(요소)와 같은 의미라고 볼 수 있다.

방식 선택

XPath의 가장 큰 차이점은 XPath 식의 출발점을 절대적인 방식을 선택할지 상대적인 방식을 선택할지 지정해야한다.

/으로 시작하면 절대적인 방식이고 //으로 시작하면 상대적인 방식을 나타낸다.

즉, XPath 식을 /태그명으로 시작하면 root부터 정확한 태그를 지정해야하고, //태그명 으로 시작하면 해당 문서에 있는 첫번째 태그로부터 시작된다.

즉, /p로 시작하면 첫번째 태그가 p 태그여야하지만, //p로 시작하면 전체 문서에서 첫번째 p 태그로부터 시작한다.

Element 선택

CSS Selector와 동일하게 XPath에서도 특정 Element를 선택하기 위해선 해당 태그 명을 사용하면 된다.

Attributes 선택

CSS Selector의 Class나 ID 셀렉터와 달리 XPath에서는 속성에 대한 별도의 방식이 없다.
CSS Selector의 Attributes 선택자와 동일한 방식에 속성명에 @를 붙여주는 방식으로 특정 속성을 선택할 수 있다.

즉, div[@name='value']'은 name 속성에 value 값을 갖는 div Element를 셀렉하게 된다.
id를 선택하려면 태그명[@id='example-text']로 표현이 가능하다. CSS Selector와는 다르게 태그명을 무조건 지정해야 한다.

자식 선택

'/'를 통해 직속 자식을 선택할지 하위 자식을 선택할지를 구분할 수 있다.
CSS Selector에서 '>'을 사용하는 방식이 XPath에선 '/'을 사용하는 방식이다. '//'를 사용하면 하위 Element 중에서 해당 태그를 셀렉한다.

XPath 문법에 대한 더 자세한 정보는 아래 링크에 자세히 설명되어 있다.

XPath Syntax

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

# HTML Element selecting 실습

앞서 설명한 개념만을 갖고도 일반적인 케이스의 Elements들을 선택할 수 있다.

실습으로 사용할 HTML 문서는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example HTML</title>
</head>
<body>
    <header>
        <h1 id="unique">Welcome to Our Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2 class="important">Latest News</h2>
            <article>
                <h3><a href="#article1">Article Title 1</a></h3>
                <p name="hello">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </article>
            <article>
                <h3><a href="#article2">Article Title 2</a></h3>
                <p name="world">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </article>
        </section>

        <aside>
            <h2 class="not-important real">Related Links</h2>
            <ul>
                <li><strong>Related Link 1</strong></li>
                <li>Related Link 2</li>
                <li><I>Related Link 3</I></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 Example Company. All rights reserved.</p>
        <ABCD>Hello</ABCD>
    </footer>
</body>
</html>

위 HTML 파일을 브라우저로 연 화면이다.

~~실제 웹 페이지를 사용할까 했지만, 마땅히 선택할만한게 없어서 GPT한테 작성해달라고 했다..~~

Try CSS Selector

Welcome to My Homepage My name is Donald Duck. I live in Duckburg I have many friends: Goofy Mickey Daisy Pluto All my friends are great! But I really like Daisy!! Ciao bella We are all animals! My latest discoveries have led me to believe that we are all

www.w3schools.com

위 페이지에서 CSS Selector 사용법을 직관적으로 확인할 수도 있다.

예시 문서에서 각 요소를 뽑아내는 방식의 차이를 확인하고 크롬 개발자 도구를 통해 검증해볼 예정이다.

작성의 편의를 위해서 CSS Selector는 [CS]로 XPath는 [XP]로 접두어를 붙여서 표현할 예정이다.

Welcome to Our Website

HTML 문서에서 가장 큰 글자인 Welcome to Our Website를 선택하기 위해선 아래 식을 사용할 수 있다.

[CS] h1
[XP] //h1

또는 ID 속성을 사용해서도 선택이 가능하다.

[CS] #unique or [id='unique'] or h1[id='unique']
[XP] //*[@id='unique'] or //h1[@id='unique']

ID 값을 통해 셀렉하는 방식은 CSS Selector가 더 간단하다.

Latest News

Latest News만 셀렉하기 위한 방법은 다음과 같다.

[CS] section > h2 or section h2 or h2.important
[XP] //section / h2 or //section // h2 or // h2[@class='important']

CSS Selector의 element 셀렉터와 class 셀렉터 사용 - h2.import

HTML 문서에서 h2 태그는 총 두개 존재하는데, h2 태그로만 선택을 하기 위해선 클래스 속성을 사용하거나 자식 관계를 이용할 수 있다.

Article Title 1

[CS] section > :nth-child(2) a or a[href='#article1']
[XP] // section / article[1] // a or //a[@href='#article1']

CSS Selector으론 :nth-child(2)을 사용해 section 아래의 두번째 직속 자식 Element을 선택하고 그 하위의 a 태그를 선택하는 방식과 a 태그의 href 속성 명을 정확히 지정하는 방식을 사용했다.

XPath 방식은 리스트 인덱싱 방식처럼 대괄호로 첫번째 자식 Element를 지정할 수 있다.

# 결론

기존에 자주 사용하는 CSS Selector 뿐만 아니라 XPath의 개념과 사용법에 대해 정리할 수 있었다.

XPath와 CSS Selector는 만들어진 이유는 다르지만 계층적 태그 구조의 요소를 선택하는 방식으로 HTML 문서에서 Elements를 선택하기 위해 사용할 수 있다.

728x90

'Dev > Web' 카테고리의 다른 글

Spring & Kotlin에서 MongoDB 다중 업데이트 성능 향상 과정 - BulkOps (0)	2024.11.27
네이버 쇼핑 검색 과정 자동화(크롤링) with Selenuim - 2 (3)	2024.04.10
네이버 쇼핑 검색 과정 자동화(크롤링) with Selenuim - 1 (47)	2024.03.03
FastAPI & Nginx 특정 엔드포인트(Health Check) 로그 제거 - ALB Health Check 로그 제외시키기 (2)	2023.10.29
FastAPI 기반 Server Sent Event(SSE) 구현 과정 및 시행착오 - UTF-8 Decoding 및 ANSI Escape Sequence 처리 (2)	2023.10.28

# 목적