무료 변환기

CSS 축소기

브라우저에서 CSS 스타일시트를 즉시 축소하고 압축하세요. 주석을 제거하고, 공백을 축소하고, 파일 크기를 줄이세요. 무료이며 비공개입니다.

여기에 CSS 파일을 드래그 앤 드롭하세요.

.css 파일을 지원합니다. 또는 위에 CSS를 붙여넣으세요.

또는

이 도구에 대하여

CSS 축소는 스타일시트에서 공백, 주석 및 불필요한 문자를 제거하여 브라우저에 제공하기 전에 크기를 줄입니다. 실제 규칙은 변경되지 않습니다. 축소된 스타일시트는 축소되지 않은 소스와 동일하게 페이지를 렌더링합니다. 줄 바꿈, 중복되는 세미콜론, 주석, 16진수 색상 속기 기회 및 0단위 단축키(0px를 0으로 대체)를 제거하면 비용이 절감됩니다.

수십 개의 스타일 규칙이 있는 최신 웹사이트에서 일반적인 축소는 축소되지 않은 소스에 비해 20~40%입니다. 서버에서 gzip 압축과 결합하면 한계 절감 효과가 줄어듭니다. gzip은 이미 반복되는 텍스트를 효과적으로 압축합니다. 하지만 이 조합은 특히 스타일시트가 캐시되어 많은 방문자에게 여러 번 제공되는 경우 여전히 압축 단독보다 낫습니다.

이 축소기는 CSS를 단일 패스로 처리하여 url() 값 외부의 주석 제거, 공백 축소, 중괄호 닫기 전 중복 세미콜론 제거, 0 단위 약어 적용, 가능한 경우 6자리 16진수 색상을 3자리 형식으로 변환(#ffffff → #fff)합니다. 출력은 모든 브라우저가 올바르게 구문 분석하는 유효한 CSS로 유지됩니다.

CSS를 축소하는 이유

CSS 파일이 작을수록 더 빠르게 로드되고 렌더링 차단 시간이 단축되어 콘텐츠가 포함된 첫 번째 페인트 및 콘텐츠가 포함된 최대 페인트 점수가 모두 향상됩니다. Core Web Vitals가 검색 순위에 영향을 미치는 사이트의 경우 렌더링 차단 CSS의 모든 킬로바이트를 제거하는 것은 노력할 가치가 있습니다.

대역폭 비용도 규모에 따라 중요합니다. 수백만 개의 페이지 보기를 제공하는 사이트는 스타일시트가 30% 더 작을 때 측정 가능한 양의 송신을 절약합니다. CDN 청구서, 모바일 데이터 사용량 및 에너지 소비 모두 약간의 이익을 얻습니다. 축소는 기본적으로 무료입니다. 즉, 유지 관리 비용이 없는 일회성 빌드 단계입니다.

사용 방법

CSS를 붙여넣고 축소된 버전을 받으세요.

  1. CSS 붙여넣기: .css 파일을 드롭하거나 CSS 소스를 입력 영역에 붙여넣습니다. 축소기는 유효한 CSS(CSS 변수, calc(), 그리드 및 Flexbox를 포함한 최신 구문)를 허용합니다.
  2. 옵션을 선택하세요: 기본값은 주석을 제거하고, 공백을 축소하고, 일반적인 단축키를 적용합니다. 주석이나 특정 서식을 유지해야 하는 경우 특정 변환을 비활성화할 수 있습니다.
  3. 축소: 축소기는 CSS를 탐색하여 활성화된 각 변환을 적용합니다. 출력은 크기가 축소된 기능적으로 동일한 CSS입니다.
  4. 출력 사용: 복사하거나 다운로드하세요. 빌드 출력의 소스 CSS를 축소된 버전으로 바꾸거나 도구의 빌드 단계로 축소를 실행하세요.

일반적인 사용 사례

기술적인 세부사항

CSS 축소는 대부분 보수적인 공백 제거입니다. 선택기, 선언 및 값 내부의 공백은 중요한 곳에 유지됩니다. 외부의 공백은 축소됩니다. /*로 시작하지 않으면 주석이 제거됩니다! (라이센스 보존 설명).

일반적인 단축키: 0px, 0em 및 유사한 0 단위 값은 0이 됩니다. 숫자 쌍(#ffffff, #336699)이 포함된 6자리 16진수 색상은 3자리(#fff, #369)가 됩니다. } 앞의 마지막 세미콜론이 제거됩니다. 16진수는 때때로 더 길기 때문에 색상 이름은 자동으로 16진수로 변환되지 않습니다(빨간색은 길이가 #f00보다 짧고 #ff0000은 빨간색보다 깁니다).

출력은 입력을 허용하는 CSS 유효성 검사기를 통과해야 합니다. 브라우저 지원은 변경되지 않았습니다. 축소는 규칙 자체를 수정하지 않고 텍스트 표현만 수정합니다.

모범 사례

자주 묻는 질문

CSS 축소는 무엇을 제거합니까?
공백(공백, 탭, 줄 바꿈), 주석(/* ... */), 불필요한 세미콜론, 중복 0(0.5 → .5), 단축 최적화(#ffffff → #fff) 및 중복 단위(0px → 0).
축소된 CSS를 프로덕션에서 사용해도 안전한가요?
예. 축소는 모든 CSS 규칙, 선택기 및 속성 값을 유지합니다. 출력은 기능적으로 동일합니다. 브라우저는 이를 정확히 동일한 방식으로 해석합니다. 이는 모든 제작 웹사이트의 표준 관행입니다.
크기 감소는 어느 정도까지 예상해야 합니까?
일반적으로 잘 작성된 CSS의 경우 20-50%입니다. 자세한 형식을 사용하여 주석이 많이 달린 코드는 더 큰 감소를 보입니다. 이미 컴팩트한 CSS는 10-15%만 축소될 수 있습니다.
gzip을 사용하는 경우 CSS를 축소해야 합니까?
네, 둘 다요. Gzip은 반복되는 패턴을 압축하고 축소는 불필요한 문자를 제거합니다. 함께 사용하면 단독으로 사용하는 것보다 더 나은 압축을 제공합니다. 축소 + gzipped CSS는 일반적으로 원본보다 85-95% 더 작습니다.
항상 축소해야 하나요?
생산용으로는 그렇습니다. 개발 소스 파일의 경우 유지 관리를 위해 읽기 가능한 CSS가 필수적입니다. 편집 시가 아닌 빌드 시 축소를 실행합니다.
내 CSS가 서버에 업로드되나요?
아니요. 축소기는 브라우저에서 실행됩니다.
cssnano나 csso와 비교하면 어떤가요?
cssnano와 csso는 프로덕션 빌드를 위한 PostCSS 플러그인입니다. 중복 규칙 병합과 같은 보다 공격적인 변환을 제공합니다. 이 도구는 빌드 설정 없이 임시 사용을 위한 기본 축소를 다룹니다.
축소가 소스 맵을 손상시키나요?
축소는 소스 맵을 생성하지 않습니다. 이 도구는 축소된 출력만 생성합니다. 프로덕션에서 축소된 CSS를 디버깅하려면 빌드의 일부로 소스 맵을 생성하세요.