CSS 압축 및 정렬 도구
프로덕션을 위해 CSS 압축 또는 가독성을 위해 정렬 (100% 클라이언트 측)
CSS 압축기 및 포맷터 문서
이 도구는 무엇인가요?
이 도구를 사용하면 CSS 코드를 압축(축소)하거나 포맷할 수 있습니다. 축소는 불필요한 공백, 주석 및 중복 문자를 제거하여 프로덕션 배포를 위한 파일 크기를 줄입니다. 포맷팅은 개발 중 가독성을 높이기 위해 적절한 들여쓰기와 줄 바꿈으로 CSS를 포맷합니다.
주요 기능
- CSS 축소 - 공백, 줄 바꿈 및 주석을 제거하여 파일 크기 감소
- CSS 포맷 - 가독성을 위해 적절한 들여쓰기와 줄 바꿈으로 CSS 포맷
- 사용자 정의 가능한 들여쓰기 크기(2칸, 4칸 또는 탭)
- 축소 중 주석을 보존하는 옵션
- 압축률을 보여주는 파일 크기 비교
일반적인 사용 사례
- 페이지 로드 시간을 줄이기 위해 프로덕션 배포용 CSS 파일 최적화
- 디버깅 및 코드 리뷰를 쉽게 하기 위해 축소된 또는 압축된 CSS 포맷
- 일관되지 않은 포맷으로 된 CSS 코드 정리
- 사용자에게 축소된 CSS를 제공하여 대역폭 사용량 감소
이 도구의 처리 방법
공백 제거
불필요한 공백, 줄 바꿈, 탭을 모두 제거합니다. CSS 규칙은 기능에 영향을 주지 않고 한 줄로 압축됩니다. 예: `.btn { color: red; }`가 `.btn{color:red;}`가 됩니다
주석 제거
'주석 유지' 옵션이 활성화되지 않은 경우 모든 CSS 주석(/* ... */)을 삭제합니다. /*! ... */ 구문을 사용하는 중요한 라이선스 주석은 일반적으로 대부분의 압축기에서 보존됩니다.
중복 문자 제거
불필요한 세미콜론(규칙의 마지막 속성), 연산자 주변의 공백, 여분의 0(0.5 → .5)을 제거합니다. 색상 코드를 단축합니다(#ffffff → #fff).
속성 최적화
중괄호, 콜론, 쉼표 주변의 공백을 제거합니다. 예: `margin: 10px 20px;`가 `margin:10px 20px;`가 됩니다. 참고: calc() 및 필요한 기타 함수에서는 공백이 보존됩니다.
파일 크기 영향
CSS 압축은 일반적으로 원본 코드의 형식과 주석 밀도에 따라 20-50%의 파일 크기 감소를 달성합니다. 서버 측 Gzip 압축과 결합하면 총 감소율이 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 배경을 생성합니다
텍스트 차이 검사기
나란히 강조 표시된 보기로 두 텍스트 또는 파일 간의 차이를 비교합니다