HTML Formatter란?
HTML Formatter는 복잡하거나 한 줄로 붙어 있는 HTML 코드를 보기 쉽게 정리해주는 온라인 도구입니다. 들여쓰기와 줄바꿈이 일정하지 않은 HTML을 깔끔하게 정리할 수 있으며, 반대로 불필요한 공백과 줄바꿈을 줄여 HTML 코드를 압축할 수도 있습니다.
이 페이지에서는 HTML Beautify와 HTML Minify를 모두 사용할 수 있습니다. HTML 코드를 직접 붙여넣거나 기존 HTML 파일을 불러온 뒤 정리하고, 결과를 복사하거나 다시 HTML 파일로 저장할 수 있습니다.
HTML 코드를 보기 좋게 정리하는 방법
한 줄로 길게 이어진 HTML이나 들여쓰기가 뒤섞인 코드를 에디터에 입력한 뒤 Beautify를 선택하면 태그 구조에 맞춰 줄바꿈과 들여쓰기가 적용됩니다. 스페이스 2칸, 스페이스 4칸, 탭 중 원하는 들여쓰기 방식을 선택할 수 있어 긴 HTML도 보다 편하게 확인할 수 있습니다.
특히 여러 개의
div, section,ul, li가 중첩된 HTML은 한 줄 상태에서는 구조를 확인하기 어렵습니다. HTML Formatter로 정리하면 어떤 태그 안에 어떤 내용이 들어 있는지 쉽게 구분할 수 있습니다.HTML 압축과 Minify
HTML Minify는 HTML 코드에서 불필요한 줄바꿈과 공백을 줄여 더 짧은 형태로 만드는 기능입니다. HTML을 다시 한 줄에 가까운 형태로 압축해야 하거나, 정리된 HTML을 간단하게 압축해서 사용하고 싶을 때 활용할 수 있습니다.
HTML 주석이 필요한 경우에는 주석을 유지한 상태로 압축할 수 있고, 필요하지 않은 일반 주석은 제외하도록 설정할 수도 있습니다. 원본 HTML에서 중요한 주석을 사용하고 있다면 압축 전 주석 유지 설정을 확인하는 것이 좋습니다.
HTML Formatter가 필요한 경우
- 한 줄로 붙어 있는 HTML 코드를 보기 쉽게 정리하고 싶을 때
- 들여쓰기와 줄바꿈이 뒤섞인 HTML을 깔끔하게 만들고 싶을 때
- 복사한 HTML 코드의 전체 구조를 빠르게 확인하고 싶을 때
- HTML 시작 태그와 종료 태그가 제대로 작성되었는지 확인하고 싶을 때
- HTML 코드에서 불필요한 공백과 줄바꿈을 줄이고 싶을 때
- HTML 파일을 불러와 수정한 뒤 다시 파일로 저장하고 싶을 때
HTML 파일 불러오기와 저장
직접 코드를 붙여넣지 않아도 기존
.html 또는 .htm 파일을 불러와 편집할 수 있습니다. 여러 HTML 파일을 탭으로 열어 각각 확인할 수 있으며, 파일 이름도 원하는 이름으로 변경할 수 있습니다.작업이 끝난 HTML은 바로 복사하거나 다른 이름으로 저장할 수 있습니다. 저장할 때 파일 이름을 직접 지정할 수 있고, 확장자를 입력하지 않으면 HTML 파일 형식으로 저장할 수 있습니다.
HTML 태그 오류 확인
HTML을 작성하다 보면 시작 태그는 있지만 종료 태그를 빠뜨리거나, 서로 다른 태그가 잘못된 순서로 닫히는 경우가 있습니다. 이 도구는 HTML을 입력하는 동안 이러한 태그 구조 문제를 확인해 에디터와 하단 Console에 오류가 있는 줄을 표시합니다.
오류가 표시된 항목을 선택하면 해당 위치를 빠르게 확인할 수 있어, 긴 HTML에서도 문제가 있는 부분을 찾기 쉽습니다. 다만 모든 HTML 문법을 판단하는 전문적인 HTML 검사 도구는 아니므로, 최종 확인이 필요한 문서는 별도의 HTML 유효성 검사와 함께 확인하는 것이 좋습니다.
여러 HTML 파일을 탭으로 편집
하나의 HTML만 편집하는 것이 아니라 여러 파일을 각각의 탭으로 열어 작업할 수 있습니다. 새 HTML 파일을 만들거나 기존 파일을 불러온 뒤 탭을 전환하면서 편집할 수 있어, 여러 코드 조각이나 HTML 문서를 비교하면서 정리할 때 편리합니다.
자동 저장으로 작업 내용 유지
자동 저장을 켜두면 현재 작업 중인 HTML과 열린 파일 탭을 브라우저에 저장해 페이지를 새로고침한 뒤에도 작업을 이어갈 수 있습니다. 자동 저장은 기본으로 사용할 수 있으며, 필요하지 않은 경우 언제든지 끌 수 있습니다.
라이트 테마와 다크 테마
에디터는 라이트 테마와 다크 테마를 모두 지원합니다. 기본적으로 사용 중인 기기의 화면 설정에 맞춰 테마가 적용되며, 원하는 경우 라이트 또는 다크 테마를 직접 선택할 수 있습니다. 선택한 테마는 새로고침한 뒤에도 유지됩니다.
HTML Beautify와 HTML Minify의 차이
Beautify는 HTML 코드에 적절한 줄바꿈과 들여쓰기를 넣어 사람이 읽기 편한 형태로 만드는 기능입니다. 반대로 Minify는 줄바꿈과 불필요한 공백을 줄여 HTML 코드를 짧게 만드는 기능입니다.
HTML의 내용을 확인하거나 수정해야 한다면 Beautify를 사용하고, 이미 작성이 끝난 HTML을 짧은 형태로 만들고 싶다면 Minify를 사용할 수 있습니다. 필요에 따라 두 기능을 번갈아 사용할 수 있습니다.
자주 묻는 질문
- Q. 한 줄로 된 HTML도 자동으로 정리할 수 있나요?A. 가능합니다. 한 줄로 길게 붙어 있는 HTML을 입력하고 Beautify를 선택하면 태그 구조에 맞춰 여러 줄과 들여쓰기 형태로 정리할 수 있습니다.
- Q. HTML 코드 압축도 가능한가요?A. 가능합니다. Minify를 사용하면 불필요한 공백과 줄바꿈을 줄여 HTML을 더 짧은 형태로 만들 수 있습니다.
- Q. HTML 파일을 직접 불러올 수 있나요?A. 가능합니다. HTML 또는 HTM 파일을 불러와 에디터에서 바로 확인하고 수정할 수 있습니다. 여러 파일을 각각의 탭으로 열어 작업하는 것도 가능합니다.
- Q. 수정한 HTML을 다시 파일로 저장할 수 있나요?A. 가능합니다. 현재 HTML을 복사할 수도 있고, 원하는 파일 이름을 입력해 HTML 파일로 저장할 수도 있습니다.
- Q. 닫는 태그가 빠진 HTML도 확인할 수 있나요?A. 시작 태그에 대응하는 종료 태그가 없거나 태그 순서가 잘못된 경우 에디터와 Console에서 오류 위치를 확인할 수 있습니다.
- Q. 작업 내용은 새로고침하면 사라지나요?A. 자동 저장이 켜져 있으면 작업 중인 HTML과 파일 탭을 브라우저에 저장해 새로고침 후에도 이어서 사용할 수 있습니다.
- Q. 다크 모드도 지원하나요?A. 지원합니다. 기기의 시스템 테마를 자동으로 따르거나 라이트·다크 테마 중 하나를 직접 선택할 수 있습니다.
- Q. 전체 HTML 문서가 아니라 일부 코드만 넣어도 되나요?A. 가능합니다. 전체 HTML 문서뿐 아니라 div, table, form, section 등 필요한 HTML 코드 일부만 입력해 정리할 수 있습니다.
