본문으로 건너뛰기
Toolars
둘러보기
버그 신고

개발자 · 로컬 유틸리티

CSS 압축

CSS Minifier

엄격한 파싱으로 오류의 행과 열을 짚는 로컬 Worker에서 CSS를 압축하고 /*! 라이선스 주석은 그대로 남깁니다.

작업 경로 / 입력에서 결과까지

스타일시트 붙여넣기

로컬에서 실행 · 업로드 없음

CSS 압축 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

CSS를 압축하는 방법

  1. 01

    스타일시트 붙여넣기

    최대 256 KiB의 UTF-8 소스를 붙여 넣으세요. 압축 모드에서는 들여쓰기 설정을 사용할 수 없습니다.

  2. 02

    먼저 샘플로 시험하기

    샘플을 불러왔어요. 준비되면 로컬 변환을 실행해 주세요.

  3. 03

    「압축(minify)」 누르기

    압축을 누르세요. CSSO는 일반 주석을 제거하고 규칙을 재구성하지 않은 채 CSS를 줄입니다. /*!...*/ 주석은 남습니다. 대상 화면에서 확인하세요.

  4. 04

    통계 확인하기

    입력과 출력의 UTF-8 바이트 수 및 절감률을 비교하세요. 절감값이 음수면 결과가 더 커진 것입니다. 복사하거나 다운로드하기 전에 확인하세요.

  5. 05

    결과 복사 또는 다운로드

    「결과 복사」로 클립보드에 넣거나 「다운로드」로 toolars.min.css로 저장하세요. 출력이 곧바로 style 블록이나 커밋으로 향할 때는 「결과 복사」가 빠른 길입니다. 「초기화」를 누르면 워크스페이스가 비워져 다음 스타일시트로 넘어가요.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS 압축 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS 압축 도구가 유용할 때

코드 리뷰

다른 개발자와 공유하기 전에 소스를 검사하기 쉽게 만들어요.

빌드 산출물

소스를 실행하지 않고 간결한 HTML, CSS, JavaScript를 만들어요.

바로 복사하는 스니펫

핵심 예시를 포맷해 문서나 편집기에 바로 옮겨요.

CSS 압축 도구가 실제로 하는 일

몇 달 동안 손으로 다듬어 온 스타일시트에 프로덕션 형태가 필요하고, 크리티컬 CSS 블록은 문서 head에 넣기 전에 조금 더 작아져야 하고, 디자인 시스템 릴리스에는 전후 숫자를 빠르게 비교하고 싶어요. CSS 압축은 압축 결과와 정확한 절감량을 로컬에서 보여 주고, 엄격한 파싱이 조용히 배포될 뻔한 길 잃은 중괄호를 잡아 주세요. 릴리스에는 압축 결과를 사용하고 읽을 수 있는 소스는 버전 관리에 보관하세요. 미공개 스타일이 브라우저 밖으로 나가지 않고 계정도 필요 없습니다.

자주 묻는 질문

압축기는 무엇을 바꾸나요?
CSSO는 구문을 줄이고 일반 주석을 제거하지만 /*! 로 시작하는 주석은 남깁니다. 규칙 재구성은 꺼져 있으며 HTML과 JavaScript는 처리하지 않습니다.
어떤 주석이 압축 후에도 살아남나요?
/*!로 여는 주석뿐입니다. 라이선스와 저작자 표시 배너의 일반적인 관례로, 배포 후에도 저작자 표시가 살아남도록 출력에 남아요. 일반 /* */ 주석은 제거되므로, 꼭 지켜야 할 것은 압축 전에 /*! 형태로 옮기세요.
압축하면 스타일 적용이 달라지나요?
여기서는 브라우저 렌더링을 검사하지 않습니다. 대체 규칙의 순서, 선택자, 사용자 지정 속성을 포함해 대상 페이지에서 테스트하세요. 구문 분석 성공이 동일한 레이아웃을 보장하지는 않습니다.
스타일시트가 거부된 이유는요?
압축기 자체가 오류에 관대하기 때문에, CSS는 압축 전에 엄격한 파서로 파싱됩니다. 오타, 닫히지 않은 중괄호, 유효하지 않은 선언이 있으면 행과 열이 표시되며 실행이 멈춰요. 미묘하게 틀린 출력을 만들지 않습니다. 같은 엄격한 파싱이 이 패밀리의 짝꿍 CSS 포맷터도 뒷받침합니다.
한도는 어느 정도인가요?
입력은 256 KiB, 출력은 512 KiB로 제한됩니다. 로컬 Worker의 시작과 실행에 각각 5초 제한이 있으며, 소스를 수정하거나 취소하면 중단됩니다. 소스는 이 브라우저에만 남으며 업로드되지 않습니다.
CSS가 어딘가에 업로드되나요?
아니요. 소스는 로컬 Worker에서 분석하며 실행, 업로드, 저장하지 않습니다. 분석 성공이 앱의 정확성이나 호환성을 보장하지 않습니다.

개발자 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

코드 → 이미지 변환

Code to Image Converter

여섯 가지 언어의 코드를 구문 강조해 밝은·어두운 테마, 줄번호, 창 제목, 1x/2x 배율로 PNG나 SVG로 내보냅니다.

생성

URL 슬러그 생성기

URL Slug Generator

제목을 하이픈·밑줄 슬러그로 입력하는 즉시 변환합니다. 악센트는 제거하고 앰퍼샌드는 확장하며 비라틴 문자는 보존합니다.

생성

React Native 그림자 생성기

React Native Shadow Generator

React Native의 기존 그림자와 boxShadow를 비교하고 플랫폼 제한을 확인한 뒤 스타일을 복사하세요.

생성

Base64 인코딩 / 디코딩

Base64 Encoder/Decoder

Unicode 텍스트 인코딩과 Base64 디코딩을 로컬에서 처리합니다. URL-safe 값도 지원합니다.

변환