HTML 태그 추출기는 HTML에서 특정 태그를 손쉽게 추출할 수 있는 텍스트 유틸리티입니다.
🔹 사용 방법
- 아래 입력 칸에 분석할 HTML 코드를 붙여넣습니다.
- 추출할 태그 목록에 원하는 태그 또는 CSS 선택자를 한 줄에 하나씩 입력합니다.
- "태그 추출" 버튼을 클릭하면, 입력한 선택자에 해당하는 요소만 추출되어 결과 창에 표시됩니다.
- "클립보드에 복사" 버튼을 사용하여 추출된 HTML을 쉽게 복사할 수 있습니다.
- 보다 정밀한 추출을 위해 CSS 선택자를 활용할 수 있습니다.
🎯 CSS 선택자 사용법
CSS 선택자를 사용하면 원하는 HTML 요소를 보다 정밀하게 선택할 수 있습니다. 아래는 사용 가능한 선택자의 예시입니다.
1️⃣ 기본 태그 선택
meta[name="title"]→<meta name="title" content="...">태그 선택meta[name="author"]→<meta name="author" content="...">태그 선택title→<title>HTML 제목</title>태그 선택
2️⃣ 하위 요소 선택
header > div > a→<header>내부의<div>안에 있는<a>태그 선택header > h1→<header>내부의<h1>태그 선택
3️⃣ 특정 속성을 제외한 선택
특정 속성을 제외한 요소를 선택하려면 :not() 선택자를 사용할 수 있습니다.
-
header > div > a:not([href="/"]):not([href="/menu/install.html"]):not([href="#"])→href속성이/,/menu/install.html,#가 아닌<a>태그 선택
4️⃣ 특정 요소 선택
main→<main>태그 전체 선택script:last-of-type→ 마지막<script>태그 선택
5️⃣ 링크 선택
a→ 모든<a>태그 선택ul li a→ 리스트 항목<li>안에 있는<a>태그 선택
추출할 태그 혹은 CSS 선택자 예시
meta[name="title"]
meta[name="author"]
meta[name="description"]
meta[name="keywords"]
title
link[rel="canonical"]
header > div > a:not([href="/"]):not([href="/menu/install.html"]):not([href="#"])
header > h1
main
script:last-of-type
❓ 자주 묻는 질문 (FAQ)
Q. CSS 선택자를 사용해야 하나요?
A. 꼭 사용할 필요는 없지만, 특정 요소만 추출하고 싶을 때 매우 유용합니다.
Q. 여러 개의 선택자를 한 번에 사용할 수 있나요?
A. 네, 원하는 선택자를 한 줄씩 입력하면 여러 개의 요소를 동시에 추출할 수 있습니다.