CSS 포매터 & 뷰티파이어

사용 가이드

CSS 포매터는 압축되거나 일관성 없이 작성된 CSS 스타일시트를 깔끔하고 읽기 쉬운 코드로 변환하는 데 도움을 줍니다 — 데이터가 기기를 벗어나지 않고 브라우저에서 완전히 실행됩니다. 현대 프런트엔드 빌드 파이프라인은 사람이 읽을 수 없는 압축된 CSS 번들을 생성하는 경우가 많습니다. 이 도구는 프로덕션 스타일시트 디버깅, 서드파티 컴포넌트 스타일 이해, 코드 검토 전 수동으로 작성한 CSS 정리에 유용합니다.

1. CSS 붙여넣기 또는 업로드 — CSS 텍스트를 입력 패널에 직접 붙여넣거나 .css 파일을 업로드 영역에 드래그 앤 드롭합니다.
2. 출력 스타일 선택 — "미화"를 선택하여 각 속성이 들여쓰기된 줄에 있는 확장된 CSS를 생성하거나 "압축"을 선택하여 모든 공백이 제거된 가장 컴팩트한 출력을 생성합니다.
3. 들여쓰기 조정 — 들여쓰기 컨트롤을 사용하여 팀의 선호 스타일에 맞춥니다: 2 스페이스, 4 스페이스 또는 탭.
4. 포맷된 출력 확인 — 오른쪽 패널에 각 선택자와 선언 블록이 명확하게 분리된 포맷된 CSS가 표시됩니다.
5. 클립보드에 복사 — "복사"를 클릭하여 완전히 포맷된 출력을 클립보드에 복사합니다.
6. 파일 다운로드 — "다운로드"를 클릭하여 포맷된 스타일시트를 .css 파일로 저장합니다.

자주 묻는 질문

기술 구현

모든 처리는 브라우저 내에서만 실행됩니다 — 어떤 서버에도 데이터를 전송하지 않습니다. 이 도구는 프로그레시브 웹 앱(PWA)으로 완전한 오프라인 사용이 가능합니다: 첫 방문 후 모든 페이지와 리소스가 Service Worker에 의해 캐시되어 인터넷 연결 없이도 사용할 수 있습니다. 입력 데이터가 기기를 벗어나지 않아 API 키, 비밀번호, 개인 설정, 기밀 문서 등 민감한 콘텐츠를 안전하게 처리할 수 있습니다.