HTML 선택자

✅ HTML 선택자(Selector) 기본 개념 정리

📌 1. HTML 선택자란?

HTML 선택자(Selector)는 특정 HTML 요소를 선택하는 규칙입니다.
✅ 주요 용도:

• CSS 스타일 적용
• JavaScript 조작
• 웹 스크래핑 (Selenium, BeautifulSoup 등)

---

📌 2. HTML 선택자의 기본 유형

🔹 1) 태그 선택자 (Tag Selector)

특정 태그를 가진 모든 요소 선택

p { color: blue; }  /* 모든 <p> 태그 선택 */

✔ 예제

<p>첫 번째 문장</p>
<p>두 번째 문장</p>

✔ 결과: 모든 <p> 태그가 파란색이 됨.

---

🔹 2) 클래스 선택자 (Class Selector)

특정 클래스를 가진 요소 선택 (. 사용)

.text { font-weight: bold; }  /* class="text" 요소 선택 */

✔ 예제

<p class="text">이 문장은 굵게 표시됨</p>

---

🔹 3) ID 선택자 (ID Selector)

특정 ID를 가진 요소 선택 (# 사용)
✔ ID는 문서에서 **고유해야 함.

#main { background-color: yellow; }  /* id="main" 선택 */

✔ 예제

<div id="main">이 영역은 노란색 배경이 됨</div>

---

📌 3. 계층 선택자 (부모-자식 관계)

🔹 1) 자손 선택자 (A B)

A 요소 안의 모든 B 요소를 선택

div p { color: red; }  /* <div> 내부 모든 <p> 선택 */

✔ 예제

<div>
    <p>이 문장은 빨간색</p>
</div>

---

🔹 2) 직계 자식 선택자 (A > B)

A 요소의 직속 자식 B만 선택

div > p { font-size: 18px; }  /* <div>의 직속 <p> 태그만 선택 */

✔ 예제

<div>
    <p>이 문장만 선택됨</p>
    <div>
        <p>이 문장은 선택되지 않음</p>
    </div>
</div>

---

📌 4. 속성 선택자

선택자	설명	예제
[attr]	특정 속성을 가진 요소 선택	[href] (모든 링크)
[attr="value"]	특정 속성값을 가진 요소 선택	[type="submit"]
[attr^="value"]	특정 값으로 시작하는 속성 선택	[href^="https://"]
[attr$="value"]	특정 값으로 끝나는 속성 선택	[src$=".jpg"]
[attr*="value"]	특정 값을 포함하는 속성 선택	[class*="btn"]

✔ 예제

a[href="https://example.com"] { color: green; } /* 특정 링크만 선택 */
[class*="btn"] { background-color: orange; } /* "btn"이 포함된 클래스 선택 */

---

📌 5. 구조 선택자 (nth-child 등)

선택자	설명	예제
:first-child	첫 번째 자식 요소 선택	p:first-child {}
:last-child	마지막 자식 요소 선택	p:last-child {}
:nth-child(n)	부모의 n번째 요소 선택	p:nth-child(2) {}
:not(selector)	특정 선택자를 제외하고 선택	p:not(.text) {}

✔ 예제

p:first-child { color: red; } /* 첫 번째 <p> 태그만 선택 */
p:last-child { color: blue; } /* 마지막 <p> 태그 선택 */
p:nth-child(2) { font-size: 20px; } /* 두 번째 <p> 태그 크기 변경 */
p:not(.text) { background-color: lightgray; } /* class="text"가 아닌 <p> 태그 선택 */

---

📌 6. HTML 선택자와 JavaScript

JavaScript에서 HTML 선택자를 활용하는 방법

✔ 예제

// ID 선택
let mainDiv = document.querySelector("#main");

// 클래스 선택
let textElements = document.querySelectorAll(".text");

// 태그 선택
let paragraphs = document.querySelectorAll("p");

console.log(mainDiv);
console.log(textElements);
console.log(paragraphs);

---

📌 7. HTML 선택자와 Selenium (웹 스크래핑)

Selenium에서 HTML 선택자를 활용하는 방법

✔ 예제

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from webdriver_manager.chrome import ChromeDriverManager

# ChromeDriver 실행
service = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service)

# 웹사이트 열기
driver.get("https://www.starbucks.co.kr/store/store_map.do?disp=locale")

# 특정 요소가 로드될 때까지 대기 후 클릭
seoul_selector = "#container ul li:nth-child(1) > a"
WebDriverWait(driver, 5).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, seoul_selector))
).click()

---

📌 8. HTML 선택자와 BeautifulSoup (웹 스크래핑)

✔ 예제

from bs4 import BeautifulSoup

html = '''
<div id="main">
    <p class="text">Hello, world!</p>
    <p class="text">Welcome to Web Scraping</p>
    <a href="https://example.com">Click me</a>
</div>
'''

soup = BeautifulSoup(html, 'html.parser')

# 태그 선택
print(soup.find('p'))  # 첫 번째 <p> 태그 선택

# 클래스 선택
print(soup.find_all('p', class_='text'))  # <p> 태그 중에서 class="text"인 요소만 선택

# ID 선택
print(soup.find(id="main"))  # id="main" 선택

---

✅ HTML 선택자 핵심 요약

선택자	기호	설명
태그 선택자	tag	특정 태그 선택 (p, div)
클래스 선택자	.class	특정 클래스 선택 (.text)
ID 선택자	#id	특정 ID 선택 (#main)
자손 선택자	A B	특정 요소 내부의 모든 하위 요소 선택 (div p)
직계 자식 선택자	A > B	특정 요소 내부의 직속 하위 요소 선택 (div > p)
속성 선택자	[attr]	특정 속성을 가진 요소 선택 ([href], [type="submit"])
구조 선택자	:nth-child(n)	특정 조건의 요소 선택 (p:first-child)

💡 HTML 선택자는 CSS 스타일링, JavaScript 조작, 웹 스크래핑(Selenium, BeautifulSoup) 등에 필수적으로 사용됩니다.
💡 웹 스크래핑(Web Scraping) 은 자동화된 프로그램을 사용하여 웹사이트에서 데이터를 추출하는 기술입니다. 이를 통해 뉴스 기사, 상품 정보, 환율, 날씨 정보 등을 수집할 수 있으며, 주로 Selenium, BeautifulSoup, Scrapy 등의 라이브러리를 활용합니다.