HTML 비교
두 HTML 파일을 온라인으로 비교하세요. DOM 구조를 노드 단위로 비교하거나 두 문서를 샌드박스에서 나란히 미리 봅니다. 무료이며 아무것도 업로드하지 않습니다.
파일은 브라우저를 벗어나지 않습니다.
HTML 비교 소개
두 HTML 문서를 구조(DOM 방식)로 비교하거나 나란히 렌더링해 비교합니다. 템플릿 변경, CMS 내보내기, 자동 생성 마크업을 따라갈 때 좋습니다.
사용 방법
- 두 HTML 조각을 붙여 넣거나 불러옵니다.
- 옵션에서 방식을 고릅니다. 구조(DOM 트리 비교) 또는 렌더링(시각 비교)입니다.
- 속성별, 노드별로 변경 내용을 확인합니다.
예제 사용해 보기
새 행동 유도 버튼이 생기고 제목이 바뀐 히어로 영역입니다.
이 도구가 다루지 않는 것
- 외부 자원(CSS, 스크립트, 글꼴)은 가져오지 않습니다. 렌더링 방식은 인라인 스타일만 반영합니다.
- 형식이 잘못된 입력에서는 태그 자동 닫기 추론이 브라우저 파서와 다를 수 있습니다.
자주 묻는 질문
내 파일이 브라우저를 벗어나나요?
아닙니다. 모든 비교는 브라우저 안에서 실행됩니다. 붙여 넣거나 끌어다 놓거나 불러온 내용은 서버로 올라가지 않으며, 페이지를 연 다음 네트워크가 끊겨도 도구는 계속 동작합니다.
이 도구는 무료인가요?
예. 모든 DiffResolver 도구는 무료이고, 계정도 가입도 설치도 필요 없습니다. 처리가 사용자 기기에서 이루어지므로 서버가 정하는 사용 제한도 없습니다.
구조 방식과 렌더링 방식은 무엇이 다른가요?
구조 방식은 해석한 DOM 트리(태그, 속성, 텍스트 노드)를 비교하므로 템플릿과 자동 생성 마크업에 알맞습니다. 렌더링 방식은 두 문서를 나란히 보여 주어 눈으로 확인하게 합니다.
이 도구가 외부 CSS나 스크립트를 불러오나요?
아닙니다. 개인 정보 보호와 일정한 결과를 위해 외부 자원은 가져오지 않습니다. 렌더링 방식은 인라인 스타일만 반영합니다.
파일 크기 제한이 있나요?
아무것도 업로드하지 않으므로 서버 제한은 없습니다. 실제 한계는 기기의 메모리가 정합니다. 텍스트 10 MB, 이미지 40 MB, 문서 100 MB, 압축 파일 500 MB를 넘으면 처리가 느릴 수 있다고 알려 주지만, 파일을 막지는 않습니다.
오프라인에서도 동작하나요?
예. 브라우저가 처음 방문한 다음 도구의 사본을 보관하므로, 전에 연 페이지는 네트워크 없이도 동작합니다. 브라우저 메뉴에서 DiffResolver를 앱으로 설치할 수도 있습니다. 설치는 선택 사항이고, 일반 탭에서도 똑같이 동작합니다.
내 데이터는 어디에 저장되나요?
파일은 어디에도 저장되지 않습니다. 페이지의 메모리에만 있다가 탭을 닫으면 사라집니다. 직접 저장한 것만 이 브라우저에 남습니다. 스냅샷, 도구 옵션, 테마가 그렇습니다. 지우려면 설정을 열고 모든 로컬 데이터 지우기를 고르세요.