도구 실행
웹 스타일시트의 불필요한 공백과 주석을 제거하여 용량을 줄이는 CSS 압축 도구입니다. CSS 코드를 입력하면 블록 주석을 삭제하고 중괄호, 콜론, 세미콜론, 쉼표 주변의 여백을 정리합니다. 또한 연속된 공백을 하나로 줄이고 닫는 중괄호 바로 앞의 불필요한 세미콜론을 제거합니다. 빈 문자열을 입력하면 빈 텍스트와 0 크기 결과가 반환되며, 일반 스타일시트를 처리하면 압축된 코드와 함께 원본 길이, 변환 후 길이, 절감된 글자 수 및 소수점 첫째 자리까지 계산된 절감 비율을 제공합니다. 스타일시트 전송량을 줄여 웹 페이지 로딩 속도를 개선하고자 할 때 유용하게 활용할 수 있습니다.
사용 방법
- CSS 입력창에 최적화할 스타일시트 텍스트를 입력하거나 붙여넣습니다.
- 실행 버튼을 눌러 공백 및 주석 정리 작업을 진행합니다.
- 변환 창에서 압축된 CSS 코드와 함께 원본 크기, 변환 크기, 절감 비율을 확인합니다.
- 최적화된 CSS 코드를 복사하여 웹 프로젝트나 배포 파일에 적용합니다.
예시
- header { color: #333333; margin: 10px 0; } 형태의 스타일 규칙을 header{color:#333333;margin:10px 0} 형식으로 압축하고 줄어든 크기를 확인합니다.
- /* 기본 여백 설정 */ body { margin: 0; padding: 0; } 과 같이 주석이 포함된 코드를 입력하여 주석을 삭제하고 공백을 최소화합니다.
자주 묻는 질문
코드에 작성된 주석은 어떻게 처리되나요?
스타일시트 내에 포함된 블록 주석은 최적화 과정에서 모두 삭제됩니다.
공백과 줄바꿈은 어떻게 정리되나요?
중괄호, 콜론, 세미콜론, 쉼표 주변의 공백이 제거되며, 연속된 공백은 한 칸으로 축소되고 코드 앞뒤의 여백도 정리됩니다.
닫는 중괄호 앞의 세미콜론은 어떻게 되나요?
스타일 블록의 닫는 중괄호 바로 앞에 오는 세미콜론은 불필요한 문자로 인식되어 자동으로 제거됩니다.
입력창을 비워두고 실행하면 어떻게 되나요?
공백만 있거나 비어 있는 입력을 전달하면 빈 텍스트 결과와 함께 원본 및 변환 길이가 0으로 표시됩니다.