CSS 압축기 / 정리기
CSS를 붙여넣고 정리 버튼을 클릭하면 적절한 들여쓰기로 포맷되며, 압축 버튼을 클릭하면 코드가 압축됩니다. 모든 처리는 브라우저에서 이루어집니다.
CSS 축소/정리에 대하여
이 도구는 브라우저에서 완전히 CSS를 처리합니다. 어떤 서버로도 데이터가 전송되지 않습니다.
- 정리: 축소된 CSS에 적절한 들여쓰기와 줄바꿈을 추가하여 가독성을 높입니다.
- 축소: 공백, 주석 및 불필요한 문자를 제거하여 파일 크기를 줄입니다.
압축은 전송을 위한 최적화이지 소스에 남겨 둘 단계가 아닙니다. 배포되는 쪽에서는 주석과 공백을 걷어 내고, 편집하는 쪽은 읽기 좋은 사본으로 두세요. 압축이 이미 켜진 서버에서는 이득이 생각보다 작습니다. gzip이 반복되는 공백을 아주 잘 다루기 때문입니다. 그래도 도움이 되고 비용은 들지 않습니다.
마크업이 말을 안 듣나요
이스케이프된 엔티티, 깨진 인코딩, CMS에서는 이렇게 보이는데 페이지에서는 저렇게 보이는 콘텐츠. 대개는 파이프라인 어딘가가 추측하고 있다는 뜻입니다. 저희는 프런트엔드와 그 뒤의 배포 경로까지 만듭니다. 쓴 그대로 방문자에게 보이도록 말이죠.
사이트에 대해 이야기하기자주 묻는 질문
압축하면 실제로 얼마나 줄어드나요
압축이 켜져 있으면 생각보다 적게 줄어듭니다. gzip이 이미 반복 공백을 효율적으로 접기 때문입니다. 절약은 실재하지만 대개 소박하며, 대부분의 스타일시트에서 더 큰 이득은 아무도 쓰지 않는 규칙을 지우는 데서 옵니다.
스타일시트가 망가지지 않나요
입력이 올바르다면 망가지지 않습니다. CSS에서 주석과 공백은 의미를 갖지 않지만 예외가 하나 있습니다. 자손 선택자 안의 공백은 의미가 있어, 그것을 지우는 도구는 규칙이 무엇에 걸리는지를 바꿉니다. 이 페이지는 그 공백을 지킵니다.
원래 서식을 되찾을 수 있나요
읽기 좋게 만들 수는 있지만 원본을 되찾을 수는 없습니다. 주석은 사라졌고 작성자가 고른 줄바꿈도 사라졌습니다. 정돈은 일관된 모양을 만들 뿐 원래의 그것이 아니므로, 지켜야 할 것은 소스 사본입니다.
손으로 압축해야 하나요
한 번뿐이라면 괜찮습니다. 정기적으로 배포하는 것은 빌드 과정에서 압축해, 읽기 좋은 사본이 편집 대상으로 남게 하세요. 이 페이지는 일회성 작업과 빌드 결과 확인을 위한 것입니다.
제 CSS가 어딘가로 올라가나요
아닙니다. 브라우저 안에서 처리되고 페이지를 벗어나지 않습니다. 이는 들리는 것보다 중요합니다. 스타일시트는 내부 클래스 이름, 아직 공개하지 않은 기능, 출시 전 사이트 구조를 자주 드러냅니다.