입력
작업 공간 준비 중…
사용 방법
- CSS를 붙여 넣거나 UTF-8 파일 또는 예제를 여세요.
- 들여쓰기를 선택하거나 CSS 축소를 켠 뒤 실행하세요.
- 결과를 확인하고 복사 또는 다운로드를 사용하세요.
CSS 서식 정리와 축소의 차이
서식 정리는 스타일시트를 읽고 검토하기 쉽게 만듭니다. 축소는 생략 가능한 공백과 일반 주석을 제거하여 더 작은 텍스트 표현을 만듭니다.
두 작업 모두 입력을 먼저 파싱합니다. 서식 정리에는 Prettier를 사용하고, 축소에는 CSSTree를 사용합니다. 스타일시트 전체를 분석하는 최적화가 아니라 구문 압축입니다.
작업 선택
서식 정리는 들여쓰기와 줄바꿈을 일관되게 펼칩니다. 프로젝트에 맞게 공백 2칸 또는 4칸을 선택하세요.
축소는 필요한 공백과 느낌표로 시작하는 라이선스 주석을 유지하며 유효한 CSS를 간결하게 만듭니다. 별도의 최적화 도구라면 더 줄일 수 있는 내용이 남을 수 있습니다.
.card { color: red; padding: 8px; }.card{color:red;padding:8px}구문 축소를 설명하는 예입니다. 이 형식으로 출력하려면 CSS 축소를 선택하세요.
파싱과 변환 범위
사용하지 않는 선택자를 제거하거나 규칙을 합치지 않으며, 에셋 URL을 다시 쓰거나 import를 가져오지도 않습니다. 원래 애플리케이션 맥락에서 결과를 테스트하세요.
입력은 Sass나 Less 프로그램이 아닌 CSS여야 합니다. 파싱 오류를 표시하며, 입력이나 설정을 바꾼 뒤에는 이전 결과를 내보낼 수 없습니다.
스타일시트 내보내기
복사는 현재 결과 전체를, 다운로드는 styles.css 파일을 제공합니다. 원본 파일을 편집하거나 프로젝트에 스타일시트를 설치하는 작업은 하지 않습니다.
텍스트 입력 한도는 1 MiB입니다. CSS 및 HTML 변환은 워커에서 실행되며 제한 시간은 30초입니다. 색상 도구는 sRGB를 사용하며, 생성된 스타일은 미리 보기이므로 실제 레이아웃에서 테스트해야 합니다.
자주 묻는 질문
축소하면 사용하지 않는 CSS도 제거되나요?
아니요. HTML을 분석하거나 선택자의 사용 여부를 판단하지 않고 구문만 간결하게 만듭니다.
라이선스 주석은 유지되나요?
축소 시 /*!로 시작하는 주석은 유지하고 일반 주석은 제거합니다. 프로젝트에 추가 고지 요구사항이 있다면 출력도 확인하세요.
Sass나 Less를 붙여 넣을 수 있나요?
CSS를 파싱하며 Sass나 Less 컴파일러를 실행하지 않습니다. 전처리기 소스는 컴파일한 뒤 사용하세요.
입력을 수정한 뒤 복사가 비활성화되는 이유는 무엇인가요?
화면의 출력이 이전 입력 또는 설정에 해당하기 때문입니다. 선택한 작업을 다시 실행해 현재 결과를 만드세요.
스타일시트가 업로드되나요?
아니요. 파싱과 변환은 브라우저에서 수행됩니다. 텍스트 파일은 로컬에서 읽고 다운로드는 새 출력 파일을 만듭니다.