CSS 압축기

이 도구에 대하여

CSS 파일이 소설처럼 커지고 있나요? 주석이 가득하거나 불필요한 공백, 삭제하지 않은 줄들로 가득할 수도 있죠. 작동은 하지만—그래도—부피가 큽니다. 속도를 늦추고, 짜증나죠?

그럴 때 CSS 미니파이어가 유용합니다. 마법은 아니지만, 거의 마법에 가깝습니다. 지저분하고 사람이 읽을 수 있는 CSS를 붙여넣으면, 그것이 압축되고 최적화된 버전을 반환합니다. 장식은 없고, 브라우저가 실제로 필요로 하는 것만 남깁니다. 공백을 제거하고, 주석을 삭제하며, 색상 코드를 줄이고, 경우에 따라서는 규칙을 병합하기도 합니다. 스타일을 망가뜨리지 않고 말이죠.

저는 수년간 이런 도구를 열두 개쯤 사용해 왔습니다. 대부분은 괜찮고, 몇몇은 다소 불편하며, 몇 개는 정말 잘 만들어졌습니다. 하지만 모두 동일한 기본 작업을 수행합니다: CSS를 더 작게 만드는 것입니다. 그리고 더 작다는 것은 일반적으로 더 빠른 로딩을 의미합니다. 솔직히 말해서, 우리가 원하는 것이 바로 그겁니다.

주요 기능

• 불필요한 공백과 줄바꿈을 제거합니다—브라우저는 당신의 포맷팅을 신경 쓰지 않으니까요.
• 주석을 모두 제거합니다. 2019년에 남긴 메모도 포함해서요.
• 가능할 경우 16진수 색상을 줄입니다—#ffffff는 #fff가 되죠. 왜 더 많이 타이핑해야 하겠습니까?
• 안전한 경우 중복 선택자와 속성을 병합합니다.
• 기능은 유지됩니다. 레이아웃이 깨지지 않습니다. (대부분의 경우에요.)
• 즉시 작동합니다. 회원가입이나 다운로드 없이, 붙여넣기만 하면 됩니다.
• 나중에 출력물을 읽어야 할 경우를 대비해 “복원” 또는 “정돈” 옵션이 보통 제공됩니다.

자주 묻는 질문

미니파이 처리가 제 웹사이트를 망가뜨릴까요?
거의 없습니다. 대부분의 미니파이어는 신중하게 작동합니다. 하지만 CSS에 특이한 핵(hack)이 있거나 특정 포맷팅(예: 특정 @import 규칙)에 의존하는 경우, 문제가 발생할 수 있습니다. 미니파이 처리 후에는 항상 테스트하세요. 그리고 백업도 반드시 해두세요. 진짜로요.

개발 중에 미니파이 처리해야 할까요?
아닙니다. 작업 중에는 원본 파일을 깨끗하고 읽기 쉽게 유지하세요. 배포할 준비가 되었을 때만 미니파이 처리하세요. 나중에 디버깅이 걱정된다면 소스맵을 사용하세요.