HTML 정리기: 속성·스크립트·불필요한 요소 제거

지저분한 HTML을 붙여 넣으면 속성 없는 깔끔한 뼈대와 구조 JSON 개요를 얻을 수 있습니다. 스크립트, 스타일, 주석, SVG, 폼과 사용자 지정 선택자를 제거합니다.

브라우저의 기본 HTML 파서만으로 작동하며 아무것도 업로드하지 않습니다. 콘텐츠 추출, 스크래핑 파이프라인, CMS 마이그레이션, LLM 입력용 HTML 준비에 유용합니다.

제거할 사용자 지정 CSS 선택자(한 줄에 하나)

입력 HTML

HTML 정리기 소개

실제 웹사이트에서 복사한 HTML에는 프레임워크 클래스 이름, 인라인 스타일, data-* 속성, 추적 스크립트, SVG 아이콘, 주석 표시와 단일 목적의 div 래퍼가 겹겹이 들어 있습니다. 스크래핑 파이프라인, CMS 마이그레이션, 비교 작업 또는 언어 모델에 보내기 전 페이지 정리에서 정말 필요한 것은 콘텐츠 구조이며, 나머지는 핵심을 가리고 토큰만 낭비하는 잡음입니다. 이 도구는 브라우저 자체 파서(DOMParser)로 HTML을 분석한 뒤 설정 가능한 정리 과정을 적용합니다. 모든 속성을 제거하고(링크 구조를 유지하도록 href만 남길 수 있음), script·style·주석·SVG·폼 노드를 삭제합니다. 사용자 지정 CSS 선택자와 일치하는 요소도 제거하며(한 줄에 하나, 내비게이션이나 쿠키 배너 등에 유용), 남은 빈 태그를 정리하고, 필요하면 자식 하나만 있고 자체 텍스트가 없는 래퍼를 들어내 div 중첩을 줄입니다. 출력은 정리된 HTML과 남은 구조의 JSON 개요(tag, text, children, href) 두 가지입니다. 프로그램 처리에 편리하며 크기 배지로 얼마나 줄었는지도 확인할 수 있습니다. 일반적인 최신 페이지에서는 정리된 뼈대가 입력보다 80-95% 작아집니다. 모든 처리는 브라우저 탭에서 로컬로 이루어지며 HTML은 기기 밖으로 나가지 않습니다.

HTML 정리 예시

각 옵션이 코드 조각에 적용하는 작업입니다.

입력	출력	설명
⟨div class="a b c" data-x="1"⟩⟨p style="color:red"⟩Hi⟨/p⟩⟨/div⟩	⟨div⟩⟨p⟩Hi⟨/p⟩⟨/div⟩	모든 속성을 제거하고 구조와 텍스트는 유지합니다.
⟨p⟩Text⟨script⟩evil()⟨/script⟩⟨/p⟩	⟨p⟩Text⟨/p⟩	script 태그를 완전히 제거합니다.
⟨a class="btn" href="/docs"⟩Docs⟨/a⟩	⟨a href="/docs"⟩Docs⟨/a⟩	‘href 유지’를 켜면 링크를 계속 사용할 수 있습니다.
⟨div⟩⟨div⟩⟨p⟩Deep⟨/p⟩⟨/div⟩⟨/div⟩	⟨p⟩Deep⟨/p⟩	‘단일 자식 래퍼 올리기’가 순수 중첩을 줄입니다.

HTML 정리기 사용 방법

입력 상자에 HTML을 붙여 넣습니다.
원하는 정리 옵션을 선택하고, 내비게이션이나 광고 영역에는 사이트별 CSS 선택자를 한 줄에 하나씩 추가합니다.
‘HTML 정리’를 클릭합니다.
정리된 HTML을 복사하거나, 프로그래밍 방식으로 처리할 경우 JSON 구조를 복사합니다.
크기 배지에서 제거된 잡음의 양을 확인합니다.

HTML 정리기 FAQ

HTML이 서버에 업로드되나요?

아니요. 기본 DOMParser를 사용한 분석과 정리는 전부 브라우저에서 실행됩니다. 페이지를 불러온 뒤에는 오프라인에서도 작동합니다.

사용자 지정 선택자는 무엇을 하나요?

CSS 선택자(한 줄에 하나)와 일치하는 요소를 정리 전에 제거합니다. 예를 들어 ‘nav’, ‘#sidebar’, ‘div[class*=ads]’가 있습니다. 잘못된 선택자는 건너뜁니다.

JSON 출력은 어디에 쓰나요?

정리된 구조를 tag, text, children과 선택적 href를 가진 객체로 나타냅니다. HTML을 다시 분석하지 않고 스크래퍼, 테스트 또는 프로그램에 구조화된 콘텐츠를 전달하기 좋습니다.

‘단일 자식 래퍼 올리기’란 무엇인가요?

요소에 자식 요소가 정확히 하나 있고 자체 텍스트가 없으면 래퍼를 제거하고 자식이 그 자리를 차지합니다. 재귀적으로 적용되어 최신 사이트의 깊은 div 중첩을 줄입니다.

LLM에 보내기 전에 HTML을 정리하는 이유는 무엇인가요?

클래스 이름, 인라인 스타일과 스크립트는 의미를 더하지 않으면서 토큰을 사용합니다. 정리된 뼈대는 보통 80-95% 작아져 비용을 낮추고 모델이 콘텐츠에 집중할 공간을 늘립니다.

이미지와 줄바꿈은 유지되나요?

‘빈 태그 제거’ 과정에서도 자식이 없어도 자체 의미가 있는 br과 img 요소는 명시적으로 유지합니다.