HTML 코드를 보기 좋게 정렬하고 들여쓰기하는 방법

HTML 형식화가 필요한 상황

HTML Formatter는 HTML 문자열의 구조를 읽기 편한 모양으로 정리하는 도구입니다. 한 줄에 붙은 요소를 여러 줄로 나누면 부모와 자식 요소의 관계를 살피기 쉽습니다. 들여쓰기 폭을 바꾸면 중첩 단계 사이의 간격도 조절할 수 있습니다. 기본 설정은 공백 2칸입니다. 별도 설정 없이 시작해도 읽기 좋은 정렬 결과를 확인할 수 있습니다. 간결한 텍스트가 필요할 때는 minify 모드를 고를 수 있습니다. 이 모드는 전체 파일을 압축하는 기능이 아닙니다. 정해진 규칙에 따라 주석과 공백을 줄이는 선택지입니다. 따라서 화면에서 구조를 검토할 때와 전달할 텍스트를 간결하게 만들 때를 구분해 사용하세요. 입력은 HTML 문자열로 준비해야 합니다. 문자열이 아닌 값은 형식화 대상이 되지 않습니다. 빈 문자열이나 공백만 있는 문자열은 오류가 아니라 빈 형식화 텍스트로 처리됩니다. 이 도구의 결과는 HTML 유효성, 보안, 표준 준수를 판정하는 결과로 보지 마세요.

입력부터 결과 확인까지

1. 먼저 정리할 HTML을 문자열 형태로 준비합니다. 예를 들어 붙어 있는 요소, 여러 줄로 작성된 요소, 주석이 섞인 내용을 입력할 수 있습니다. 입력란에 값을 넣을 때는 HTML 자체가 문자열로 전달되는지 확인하세요. 숫자, 객체, 배열처럼 문자열이 아닌 값은 형식화되지 않습니다.

2. 입력 내용을 살펴본 뒤 들여쓰기 폭을 정합니다. 값을 지정하지 않으면 공백 2칸이 적용됩니다. 공백이 아닌 문자가 들어 있는 입력에서는 들여쓰기 값이 정수로 바뀔 수 있어야 합니다. 0부터 8까지의 범위에 들어오는 정수라면 지정한 폭이 사용됩니다. 숫자로 변환되지 않는 값은 기본 폭으로 돌아갑니다. 범위를 벗어난 값도 공백 2칸으로 조정됩니다. 그러므로 결과의 간격이 예상과 다르면 입력한 폭의 형식과 범위를 먼저 확인하세요.

3. 다음으로 모드를 선택합니다. 설정하지 않은 모드는 beautify입니다. 입력에 공백이 아닌 문자가 있을 때 빈 모드도 beautify 방식으로 처리됩니다. 모드 값이 minify가 아니면 대소문자를 낮춘 뒤 보기 좋게 정렬하는 경로가 사용됩니다. 화면에서 요소의 계층을 확인하려면 beautify를 유지하세요. 구조보다 짧은 표현이 중요할 때만 minify를 선택하는 편이 알맞습니다.

4. 준비한 입력과 설정을 실행합니다. beautify 결과에서는 HTML 요소가 읽기 쉬운 형태로 정렬되고 중첩을 따라 들여쓰기가 표시됩니다. 결과가 성공적으로 표시되면 줄바꿈, 요소의 위치, 들여쓰기 폭을 차례로 확인하세요. 원하는 간격이 보이지 않으면 폭을 바꿔 다시 실행할 수 있습니다.

5. minify 결과를 선택했다면 바뀐 범위를 구체적으로 살핍니다. 일반 주석은 제거될 수 있습니다. 주석 내용이 정확히 [if로 시작하는 조건부 주석은 남을 수 있습니다. 태그 사이의 공백은 줄어들 수 있습니다. 반복된 공백도 축소되며, 텍스트의 앞뒤 공백은 제거됩니다. 이 동작은 주석과 공백을 정리하는 변환이므로, 결과를 전체 압축본으로 간주하지 마세요.

6. 입력이 비어 있다면 별도 내용을 기대하기보다 빈 결과를 확인합니다. 공백만 있는 값도 같은 방식으로 성공 처리됩니다. 반대로 공백이 아닌 입력은 UTF-8 기준 1,000,000바이트를 초과할 수 없습니다. 크기 제한에 걸리면 내용을 줄인 뒤 다시 시도하세요. 형식화 중 HTML 파싱이나 서식 지정에서 예외가 발생하면 성공 결과 대신 HTML 파싱 오류가 반환될 수 있습니다. 이때는 태그의 짝, 속성 표기, 괄호와 따옴표 주변을 확인한 뒤 원인을 좁혀 보세요.

출력의 의미와 확인 범위

정렬 결과는 요소의 중첩 관계를 눈으로 검토하기 위한 표현입니다. 들여쓰기 폭이 커지면 안쪽 요소가 더 멀리 배치되고, 폭이 작으면 구조가 더 촘촘하게 보입니다. 결과의 모양이 달라져도 그것만으로 HTML의 의미가 바뀌었다고 판단하지 말고 입력과 변환 모드를 함께 비교하세요. beautify가 아닌 모드를 입력해도 minify로 해석되지 않는 값은 보기 좋게 정렬하는 방식으로 처리됩니다.

minify에서는 일반 주석, 태그 사이 공백, 반복 공백, 양끝 공백이 정해진 범위에서 바뀔 수 있습니다. 조건부 주석은 내용의 시작이 정확히 [if인지에 따라 남을 수 있으므로 주석이 모두 사라진다고 단정하지 마세요. 이 결과는 제한된 공백 및 주석 변환을 보여 줄 뿐이며, HTML을 검사하거나 안전하게 바꾸거나 표준 준수를 보증하는 판정은 아닙니다.

입력의 자료형이 문자열인지 먼저 살피고, 공백만 있는지 여부를 다음으로 구분하세요. 공백이 아닌 입력이 지나치게 크면 바이트 제한을 확인해야 합니다. 오류가 발생한 경우에는 파싱과 서식 지정 과정의 문제 가능성도 고려하세요. 필요한 결과가 구조 확인인지 간결화인지에 따라 모드를 다시 선택하면 해석이 더 분명해집니다.

사용 예시

한 줄로 이어진 간단한 HTML에서 요소의 중첩 관계를 살피기 위해 줄바꿈과 들여쓰기가 있는 결과를 확인하려고 합니다.

<div><p>안내</p></div>처럼 한 줄인 HTML을 입력하고 기본 beautify 모드와 공백 2칸을 그대로 둔 뒤 실행합니다.

실행 뒤 중첩된 요소가 여러 줄로 나뉘며 설정한 들여쓰기 간격이 반영된 HTML 텍스트가 결과로 표시됩니다.

제한 사항

• minify는 지정된 주석 및 공백 변환만 수행하며, beautify 과정에서 파싱 또는 서식 지정 예외가 발생하면 성공 결과 대신 HTML 파싱 오류가 반환될 수 있습니다.

자주 발생하는 오류

• 문자열이 아닌 값을 보내거나 HTML 구조에 파싱 문제가 있으면 형식화에 실패할 수 있습니다. 입력을 문자열로 바꾸고 태그의 짝과 속성 구문을 확인한 뒤 다시 실행하세요.

자주 묻는 질문

모드를 지정하지 않으면 어떻게 처리되나요?

입력에 공백이 아닌 문자가 있을 때 기본 모드는 beautify입니다. 모드를 비워 두어도 같은 방식으로 처리되며, minify가 아닌 값 역시 보기 좋게 정렬하는 경로를 사용합니다.

내용이 없거나 큰 HTML을 넣으면 어떤 결과가 나오나요?

빈 문자열 또는 공백만 있는 문자열은 성공적으로 빈 형식화 텍스트를 반환합니다. 공백이 아닌 입력이 UTF-8 기준 1,000,000바이트를 넘으면 거부될 수 있습니다.

minify를 선택하면 HTML이 완전히 압축되나요?

minify는 전체 압축이 아니라 주석과 공백을 정해진 규칙으로 줄이는 모드입니다. 내용이 정확히 [if로 시작하는 조건부 주석은 남을 수 있습니다.