HTML / CSS / JS 미니파이어
HTML·CSS·JavaScript의 공백·주석을 제거 — 크기 절감 확인하고 결과 복사.
<!doctype html><html lang="en"><head><title>Sample Page</title></head><body><h1>Hello, world!</h1><p>This is a paragraph with multiple lines.</p></body></html>
사용법
- 소스 코드를 붙여넣으세요.
- 언어(HTML/CSS/JS)를 고르세요.
- 주석 제거 여부를 토글하세요.
- 압축 결과를 복사하세요.
자세한 설명
펼치기접기
HTML, CSS, 자바스크립트를 줄입니다. 주석을 제거하고 빌드 단계가 보통 걷어 내는 공백을 짜냅니다. 전후 크기와 절약분이 표시되어 그만한 값어치가 있었는지 볼 수 있습니다. 이것은 파서가 아니라 텍스트 수준의 압착기이고, 그 점이 쓸모의 범위를 정합니다. 공백은 어디에서나 합쳐지는데, 간격이 의미를 갖는 pre와 textarea 요소 안에서도 그렇습니다. 그러니 그런 요소가 없는 마크업에 쓰거나 나중에 복원하세요. 자바스크립트에서는 주석과 공백만 제거하고 이름 바꾸기나 죽은 코드 제거는 하지 않습니다. 인라인 조각이나 메일 템플릿에는 편리하지만, 운영 코드에서 제대로 된 번들러를 대신할 수는 없습니다. 모든 처리는 브라우저에서 이루어집니다.
자주 묻는 질문
프로덕션에 안전한가요?
작은 CSS·HTML에는 괜찮습니다. 규칙이 보수적입니다. JavaScript는 변수 이름 변경·상수 폴딩·죽은 코드 제거를 안 하니, 빌드엔 terser/esbuild 같은 도구를 권장합니다.
JS가 더 압축되지 않아요
진짜 JS 압축은 AST 기반 도구가 필요합니다. 이 미니파이어는 공백·주석만 제거합니다. 손으로 쓴 스니펫엔 충분하지만 terser 수준은 아닙니다.
<pre>·<textarea> 안의 HTML이 깨지나요?
그럴 수 있습니다 — 그 안의 공백은 의미가 있어요. 이런 요소가 든 HTML엔 미니파이어를 안 돌리거나 내용을 임시값으로 바꿨다 복원하세요.
CSS 주석이 중요한가요?
라이선스 헤더 같은 /*! 주석은 전문 미니파이어가 보존합니다. 이 도구는 '주석 제거'가 켜 있으면 전부 지우니, 라이선스 보존이 필요하면 끄세요.
관련 도구
SVG 최적화
SVGO로 SVG를 줄이세요 — 편집기 찌꺼기 제거, 좌표 반올림, 도형 병합. 전후를 나란히 확인할 수 있고 업로드하지 않습니다.
이미지
이미지 압축
JPEG·PNG·WebP 이미지를 브라우저에서 압축하고 크기를 줄이세요.
이미지
PDF 압축
PDF 안의 이미지를 다시 인코딩해 용량을 줄입니다. 텍스트는 그대로 선택·검색됩니다. 업로드하지 않습니다.
파일
동영상 압축·자르기
동영상 용량을 줄이거나 구간을 자르고 소리를 지웁니다. 해상도·화질·목표 용량을 고르면 브라우저 안에서 처리하며, 업로드는 없습니다.
이미지
CSS to JS 스타일 객체 변환기
CSS 선언 블록을 React/JS 인라인 스타일 객체로 브라우저에서 변환합니다.
개발
CSS 선택자 테스터
HTML에 대해 CSS 선택자를 테스트하고 어떤 요소가 매칭되는지 정확히 확인합니다. 브라우저에서 동작합니다.
개발