HTML 포맷터
HTML을 즉시 정리하거나 압축합니다. 인라인 요소는 같은 줄에 유지하고, 블록 요소는 적절히 들여쓰기합니다.
이 도구가 도움이 되었나요?
자주 묻는 질문
HTML 정리(뷰티파이)란 무엇인가요?
HTML 정리(포맷팅)는 압축되거나 들여쓰기가 일관되지 않은 HTML을 적절한 줄바꿈과 들여쓰기로 재정리합니다. div, p, h1 같은 블록 레벨 요소는 각각 별도의 줄에 배치되고, span, a, strong 같은 인라인 요소는 주변 콘텐츠와 같은 줄에 유지됩니다.
HTML 압축은 어떻게 유용한가요?
압축은 불필요한 모든 공백과 HTML 주석을 제거하여 파일 크기를 줄입니다. 더 작은 HTML은 더 빠른 페이지 로딩을 의미합니다. 프로덕션 웹사이트에서는 압축된 HTML 제공(gzip 압축과 결합)이 일반적인 성능 최적화 방법입니다.
포맷팅하면 페이지의 시각적 렌더링이 변하나요?
아니요. 블록 레벨 요소 사이의 HTML 공백은 의미가 없으며, 브라우저는 레이아웃에 이를 무시합니다. 포맷팅은 소스 코드의 모양에만 영향을 주며 페이지 렌더링에는 영향을 주지 않습니다. HTML 압축도 시각적 효과에 영향을 주지 않습니다.
일부 인라인 요소가 같은 줄에 유지되는 이유는 무엇인가요?
<a>, <span>, <strong>, <em> 같은 인라인 요소는 텍스트 콘텐츠 내에서 흐르도록 설계되었습니다. 이들을 별도의 줄에 배치하면 렌더링된 페이지에 시각적 공백이 추가됩니다(HTML은 인라인 컨텍스트에서 줄바꿈을 공백으로 처리하기 때문). 이 포맷터는 인라인 요소를 주변 텍스트와 같은 줄에 유지합니다.
JavaScript나 CSS가 포함된 HTML을 포맷할 수 있나요?
포맷터는 <script>와 <style> 블록의 내용을 보존하면서 일관된 들여쓰기로 재정리합니다. 이 블록 내부의 JavaScript/CSS 코드는 그대로 유지됩니다. 스크립트나 스타일의 완전한 포맷팅을 위해서는 전용 JS/CSS 포맷터를 사용하세요.
2칸 들여쓰기와 4칸 들여쓰기의 차이점은 무엇인가요?
순전히 스타일 선호도입니다. 2칸 들여쓰기는 현대 웹 개발에서 일반적입니다(Prettier의 기본 설정). 4칸 들여쓰기는 전통적이며 오래된 코드베이스나 Python 같은 언어에서 더 일반적입니다. 팀의 규칙에 맞는 것을 선택하세요.