Monu Tools

CSS 포맷터

CSS를 깔끔한 들여쓰기로 보기 좋게 만들거나 파일 크기를 줄이기 위해 압축합니다. 미디어 쿼리, calc(), 라이선스 주석을 처리합니다.

CSS 포맷터 사용 방법

  1. 01

    CSS를 입력 상자에 붙여넣으세요.

  2. 02

    보기 좋게를 선택하여 형식화하거나 압축을 선택하여 압축하세요.

  3. 03

    들여쓰기 크기를 선택하고 결과를 복사하세요.

What the CSS formatter does

This is a CSS formatter that beautifies stylesheets with clean, consistent indentation, or minifies them to shrink file size. You choose the indent size for beautifying, and switch to minify when you want the smallest output.

When to beautify and when to minify

Readable CSS is easier to scan, review and debug: when each rule and declaration is indented consistently, you can see selectors, nesting and the shape of your media queries at a glance.

Minifying is for production. It removes the whitespace and comments that browsers do not need, so the file downloads faster. On a large stylesheet the saving adds up, especially before gzip compression on the server.

Careful minifying with calc() and media queries

The minifier is careful where it matters. It keeps the spaces around plus and minus inside calc(), so calc(100% - 30px) stays valid, and it only strips spaces around structural characters such as braces, colons and semicolons. It also handles nested media queries correctly.

License comments are preserved

License comments written in the /*! ... */ form are preserved, which is the standard convention for keeping copyright and license notices in minified output even when ordinary comments are removed.

Runs in your browser

Both beautify and minify run entirely in your browser, so your stylesheets never leave your device. The tool formats for readability and size; it does not validate that your CSS is correct.

자주 묻는 질문

압축 시 calc() 표현식이 깨지나요?

아니요. 압축기는 값 내부의 더하기 및 빼기 주변 공백을 유지하므로 calc(100% - 30px)가 유효하게 유지됩니다. 중괄호, 콜론, 세미콜론 같은 구조적 문자 주변의 공백만 제거합니다.

압축 시 주석이 제거되나요?

공간을 절약하기 위해 일반 주석은 제거되지만, /*! ... */로 작성된 라이선스 주석은 저작권 표시를 보존하는 표준 관례에 따라 유지됩니다.

CSS가 어딘가에 업로드되나요?

아니요. 보기 좋게 만들기와 압축 모두 브라우저에서 완전히 실행되므로 스타일시트가 기기 밖으로 나가지 않습니다.

출처

이 도구 임베드하기

이 도구를 직접 운영하는 웹사이트에 추가하세요. 아래 코드를 복사하면 자동으로 최신 상태로 유지됩니다.

<iframe src="https://monu.tools/embed/ko/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

관련 도구