🎨

CSS 포맷터 & 미니파이어

압축된 CSS를 가독성을 위해 보기 좋게 정리하거나 프로덕션용으로 CSS를 압축하세요. 모든 것은 브라우저에서 실행됩니다 · 서버 없음, 추적 없음.

개발자 도구 로컬에서 실행 데이터 전송 없음
CSS 보기 좋게 정리 CSS 압축 포맷터 클라이언트 측 전용
들여쓰기 크기:
CSS 입력
0자
->
포맷된 CSS
0자 처리 실패
💡
정리 압축되거나 최소화된 CSS를 적절한 들여쓰기와 줄바꿈으로 읽기 쉬운 코드로 포맷합니다 — 디버깅이나 타사 스타일시트를 읽을 때 유용합니다. 압축 프로덕션 배포를 위해 파일 크기를 줄이도록 주석과 공백을 제거합니다. 어느 모드도 속성 값을 변경하지 않습니다.

CSS 포맷터 & 미니파이어란 무엇인가요?

CSS 포맷터 & 미니파이어는 읽기 쉬운 스타일시트 코드와 프로덕션에 바로 사용할 수 있는 압축 출력 간을 전환하는 데 도움을 줍니다. 컴파일된 CSS를 디버깅하거나 선택자와 선언을 검토하고, 배포 전에 스타일을 다시 압축할 때 유용합니다.

CSS 포맷터 & 미니파이어 사용 방법

  1. 보기 좋게 정리하거나 압축할 CSS를 붙여넣으세요.
  2. 포맷 또는 압축 모드를 선택하고 필요하면 들여쓰기를 조정하세요.
  3. 가독성이나 파일 크기 절감 효과를 확인하려면 출력을 검토하세요.
  4. 결과를 스타일시트나 빌드 파이프라인에 다시 복사하세요.

관련 도구

⚡
CSS 압축
주석과 공백을 제거하여 CSS 압축
 📝
JS 포맷터
Prettier 스타일 포맷으로 JavaScript 코드를 보기 좋게 정리하거나 압축하세요
 🏷️
HTML 포맷터
사용자 지정 가능한 들여쓰기로 HTML을 보기 좋게 정리하거나 압축하세요
CSS 포맷터 & 미니파이어 알아보기 ▾
예시
입력 .card{display:flex;padding:16px;background:#fff;border-radius:8px}
출력 .card { display: flex; padding: 16px; background: #fff; border-radius: 8px; }
일반적인 사용 사례
  • 레이아웃 문제를 디버깅하기 전에 압축된 스타일시트를 보기 좋게 정리하세요
  • 디자인 도구나 빌드 출력에서 생성된 CSS를 검토하세요
  • 프로덕션 배포를 위해 편집 후 CSS를 다시 압축하세요
  • 코드 리뷰 중 선택자와 선언을 더 명확하게 검사하세요
이 도구를 사용하는 이유
  • 크거나 압축된 스타일시트를 디버깅하는 데 유용합니다.
  • 읽기 쉬운 CSS 출력과 압축된 CSS 출력 사이를 빠르게 전환할 수 있습니다.
  • 브라우저에서 로컬로 실행되므로 원본 스타일이 브라우저를 벗어나지 않습니다.
자주 묻는 질문
포맷팅이 내 CSS 동작을 변경하나요?

No. Adding whitespace and line breaks to CSS has no effect on how browsers parse and apply the styles. The formatted output is functionally identical to the original.

벤더 접두사가 포함된 CSS도 포맷할 수 있나요?

예. -webkit-transform 또는 -moz-appearance 같은 벤더 접두사 속성은 표준 속성으로 처리되어 일반적으로 포맷됩니다.

SCSS 또는 Less 구문을 처리하나요?

포맷터는 표준 CSS에 최적화되어 있습니다. 중첩이나 변수 같은 SCSS/Less 전용 구문은 올바르게 포맷되지 않을 수 있으므로 해당 파일에는 전용 SCSS/Less 포맷터를 사용하세요.

프로덕션에서 사용하기 전에 CSS를 포맷해야 하나요?

아니요. 프로덕션에서는 파일 크기를 줄이기 위해 CSS를 압축해야 합니다. 개발 및 코드 리뷰 중에는 CSS 포맷터를 사용하고, 배포 전에 압축하세요.