CSS 압축 및 정렬 도구
프로덕션을 위해 CSS 압축 또는 가독성을 위해 정렬 (100% 클라이언트 측)
CSS 압축기 및 포맷터 문서
이 도구는 무엇인가요?
CSS 압축은 동작을 변경하지 않으면서 스타일시트에서 구문적으로 불필요한 문자를 제거합니다: 규칙 사이의 공백, 개행, CSS 주석(/* ... */), 닫는 중괄호 앞의 불필요한 세미콜론. 미화 도구는 반대 작업을 수행하여 읽기 쉽도록 일관된 들여쓰기와 개행으로 재형식화합니다.
주요 기능
- 공백 및 주석 제거: 모든 규칙 간 공백, 개행 및 /* */ CSS 주석을 제거합니다. 문자열 리터럴과 url() 값은 유지합니다. '주석 보존' 옵션 활성화 시 /*! ... */ 라이선스 주석 블록을 유지합니다.
- 선택자 및 선언 압축: 선택자의 여러 공백 축소(div > span), } 앞 마지막 세미콜론 제거, 0px→0, 0.5→.5 등 숫자값 정규화.
- 설정 가능한 미화 들여쓰기: 2칸, 4칸 또는 탭 들여쓰기 출력; 규칙 당 한 줄; @media, @keyframes, 중첩 선택자 구조 유지.
- CSS 사용자 정의 속성 인식: var() 식이나 calc() 공백은 압축하지 않습니다(일부 브라우저에서 파싱 오류 가능성).
- 파일 크기 차이 표시: 원본 바이트, 압축 후 바이트, 압축률을 출력 옆에 표시합니다.
일반적인 사용 사례
- 프로덕션 빌드 파이프라인: Webpack(css-minimizer-webpack-plugin), Vite(내장 Lightning CSS), Gulp(gulp-clean-css)에 통합.
- 압축된 서드파티 CSS 디버깅: Bootstrap 5 bootstrap.min.css나 Tailwind 출력을 미화하여 규칙 구조 및 특이성 체인 분석.
- 레거시 스타일시트 정리: 리팩토링 전 불일치한 들여쓰기와 혼합된 인용 스타일의 CSS를 정규화.
- CDN 페이로드 감소: 압축 CSS로 총 전송 바이트 감소 및 LCP 점수 개선; 비사전압축 스타일시트에서 20-50% 감소.
이 도구의 처리 방법
공백 제거
불필요한 공백, 줄 바꿈, 탭을 모두 제거합니다. CSS 규칙은 기능에 영향을 주지 않고 한 줄로 압축됩니다. 예: `.btn { color: red; }`가 `.btn{color:red;}`가 됩니다
주석 제거
'주석 유지' 옵션이 활성화되지 않은 경우 모든 CSS 주석(/* ... */)을 삭제합니다. /*! ... */ 구문을 사용하는 중요한 라이선스 주석은 일반적으로 대부분의 압축기에서 보존됩니다.
중복 문자 제거
불필요한 세미콜론(규칙의 마지막 속성), 연산자 주변의 공백, 여분의 0(0.5 → .5)을 제거합니다. 색상 코드를 단축합니다(#ffffff → #fff).
속성 최적화
중괄호, 콜론, 쉼표 주변의 공백을 제거합니다. 예: `margin: 10px 20px;`가 `margin:10px 20px;`가 됩니다. 참고: calc() 및 필요한 기타 함수에서는 공백이 보존됩니다.
파일 크기 영향
수작업 CSS의 경우 20-50% 감소. Tailwind 같은 프레임워크 출력은 5-15%. 주석이 많은 파일은 40-60%. Gzip 추가 시 전송 크기 70-80% 추가 감소.
| 시나리오 | 원본 크기 | 압축 후 | 감소율 | Gzip 후 |
|---|---|---|---|---|
| 주석이 있는 잘 포맷된 CSS | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (총 85-90%) |
| 주석이 적은 이미 압축된 CSS | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (총 80-85%) |
| 주석이 많은 문서 CSS | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (총 88-92%) |
관련 도구
HTML 축소기 및 정렬기
HTML 코드를 압축하거나 정렬하고, 공백 및 주석을 제거하여 파일 크기를 최적화하거나 가독성을 위해 코드를 포맷합니다
JavaScript 축소기 및 정렬기
JavaScript 코드를 압축하거나 정렬하고, 공백 및 주석을 제거하여 파일 크기를 최적화하거나 가독성을 위해 코드를 포맷합니다
색상 선택기 및 변환기
HEX, RGB, HSL, CMYK, YCbCr, Lab 형식 간에 색상을 변환하고, 색상 팔레트를 생성하고, WCAG 대비를 확인합니다
색상 팔레트 생성기
색상 혼합, 그라디언트 생성, 색상 구성표 및 CSS/SCSS/JSON 형식으로 내보내기를 제공하는 전문 색상 팔레트 생성기
이미지를 Base64로 변환기
PNG, JPG, GIF, SVG, WebP 형식을 지원하여 이미지를 Base64 인코딩으로 변환하고 Data URI 및 CSS 배경을 생성합니다
텍스트 차이 검사기
나란히 강조 표시된 보기로 두 텍스트 또는 파일 간의 차이를 비교합니다