CSS 뷰티파이어 & 미니파이어

CSS Beautifier & Minifier는 CSS 코드를 포맷하고 최적화하는 포괄적인 도구입니다. 벤더 CSS를 디버깅하거나, 프로덕션용 스타일시트를 최적화하거나, 대규모 코드베이스를 유지 관리하는 경우 깨끗하고 올바르게 포맷된 CSS는 가독성과 성능에 필수적입니다. 이 도구는 압축된 CSS를 적절한 들여쓰기가 있는 읽기 쉬운 형식으로 즉시 변환하거나, 개발 CSS를 축소하여 파일 크기를 줄이고 페이지 로드를 빠르게 합니다. 고급 기능에는 속성 정렬(일관성을 위한 알파벳순 구성), 색상 최적화(#ffffff를 #fff로 축약하는 것과 같은 16진수 코드 단축), 미디어 쿼리 정렬(가장 작은 것부터 가장 큰 중단점까지 구성) 및 누락된 중괄호나 세미콜론을 잡아내는 구문 검증이 포함됩니다. 모든 처리는 브라우저의 클라이언트 측에서 발생합니다. CSS는 어떤 서버에도 업로드되지 않으므로 프로덕션 스타일시트 및 클라이언트 프로젝트에 안전합니다.

입력 패널에 CSS를 붙여넣거나 입력하세요. 축소되거나 지저분한 CSS를 적절한 들여쓰기 및 줄 바꿈으로 포맷하려면 Beautify 모드를 선택하세요. 2칸 공백, 4칸 공백 또는 탭 들여쓰기를 선택하세요. 공백, 주석을 제거하고 값을 최적화하여 프로덕션용 CSS를 압축하려면 Minify 모드를 선택하세요. 이 도구는 실시간으로 구문을 검증하여 닫히지 않은 중괄호, 누락된 세미콜론 또는 잘못된 속성 이름과 같은 오류를 강조 표시합니다. 고급 옵션: 각 규칙 내에서 CSS 속성을 알파벳순으로 정리하려면 'Sort Properties'를 전환하세요(버전 관리에서 diff 가독성 향상). 색상 코드를 단축하려면 'Color Optimization'을 활성화하세요(#ffffff → #fff, rgb(255,0,0) → #f00). 가장 작은 중단점에서 가장 큰 중단점까지 @media 쿼리를 재정렬하려면 'Sort Media Queries'를 사용하세요. 압축 수준 선택: Normal(안전, 일부 포맷 유지) 또는 Aggressive(최대 압축, CSS 해킹에 영향을 줄 수 있음). 코드 주석을 유지하거나 제거하려면 'Preserve Comments'를 전환하세요. CSS3, 벤더 접두사, CSS 변수, 중첩 선택자 및 @supports/@media 규칙과 함께 작동합니다.