HTML 포매터 & 뷰티파이어
사용 가이드
HTML 포매터는 서버 개입 없이 HTML 마크업을 정리하고 들여쓰기하는 온라인 도구입니다. 지저분하거나 압축되거나 기계 생성된 HTML은 읽고 디버깅하기 매우 어렵습니다. 이 도구는 한 번의 클릭으로 이러한 문제를 해결합니다. 입력 영역에 HTML 스니펫이나 전체 페이지 소스를 붙여넣으면 문서 트리의 실제 구조를 반영하는 깔끔하게 들여쓰기된 출력이 즉시 생성됩니다. 들여쓰기 너비를 프로젝트 코딩 표준에 맞게 사용자 정의할 수 있습니다 — 2 스페이스, 4 스페이스 또는 탭 문자. 도구가 브라우저에서 로컬로 실행되므로 비밀번호나 기밀 내용이 포함된 HTML도 안전하게 포맷할 수 있습니다.
- HTML 붙여넣기 — 입력 패널을 클릭하고 HTML 내용을 붙여넣습니다 — 전체 문서, 부분 스니펫, 템플릿 프래그먼트 또는 빌드 도구의 압축된 출력 모두 가능합니다.
- 파일 업로드 (선택 사항) — .html 또는 .htm 파일을 파일 드롭 영역으로 드래그하거나 업로드 아이콘을 클릭합니다.
- 들여쓰기 설정 — 들여쓰기 선택기를 사용하여 2 스페이스(기본값), 4 스페이스 또는 탭 문자를 선택합니다.
- "포맷" 클릭 — "포맷" 버튼을 누릅니다. 오른쪽 출력 패널이 깔끔하게 들여쓰기된 HTML로 채워집니다.
- 구조 확인 — 출력을 읽어서 중첩이 올바른지 확인합니다. 들여쓰기를 통해 닫히지 않은 태그나 잘못 중첩된 요소를 쉽게 발견할 수 있습니다.
- 복사 또는 다운로드 — "복사"를 클릭하여 포맷된 HTML을 클립보드에 복사하거나 "다운로드"를 클릭하여 .html 파일로 저장합니다.
자주 묻는 질문
HTML 코드를 포매팅할 때 서버로 전송되나요?
아니요. 이 HTML 포매터는 브라우저 내에서 완전히 실행됩니다. 코드는 어떤 서버에도 전송되거나 기기 외부에 저장되지 않습니다.
오프라인으로 HTML을 포매팅할 수 있나요?
2Kit은 PWA입니다. 첫 방문 후 캐시되어 인터넷 연결 없이 완전히 오프라인으로 작동합니다.
HTML 조각(전체 문서가 아닌)도 처리할 수 있나요?
네. 포매터는 입력이 <!DOCTYPE>이나 <html>로 시작하는지 자동으로 감지합니다. 조각의 경우 "조각 모드"로 전환하여 문서 구조를 추가하지 않고 제공된 마크업만 포매팅합니다.
DOM 트리 뷰에는 무엇이 표시되나요?
오른쪽 패널에 포매팅된 HTML을 라이브 DOM 트리로 파싱하여 표시합니다. 태그 이름은 파란색, 속성 이름은 호박색, 속성 값은 초록색, 텍스트는 회색 이탤릭체로 표시됩니다.
이 HTML 포매터는 무료인가요?
2Kit은 완전 무료이며, 계정 불필요, 사용 제한 없음입니다.
기술 구현
모든 처리는 브라우저 내에서만 실행됩니다 — 어떤 서버에도 데이터를 전송하지 않습니다. 이 도구는 프로그레시브 웹 앱(PWA)으로 완전한 오프라인 사용이 가능합니다: 첫 방문 후 모든 페이지와 리소스가 Service Worker에 의해 캐시되어 인터넷 연결 없이도 사용할 수 있습니다. 입력 데이터가 기기를 벗어나지 않아 API 키, 비밀번호, 개인 설정, 기밀 문서 등 민감한 콘텐츠를 안전하게 처리할 수 있습니다.