Developer Utility
CSS Formatter
CSS 코드를 보기 좋게 정렬하거나 한 줄로 압축하고, 선택자 수·속성 수·줄 수·문자 수·압축률까지 확인할 수 있는 개발자용 CSS 정리 도구입니다.
CSS 코드 입력
정렬하거나 압축할 CSS 코드를 붙여넣은 뒤 원하는 변환 옵션을 선택하세요.
변환 결과
정렬 또는 압축된 CSS 결과를 확인하고 복사하거나 파일로 저장할 수 있습니다.
CSS 코드를 입력한 뒤 정렬 또는 압축 버튼을 눌러주세요.
CSS 정렬 방식 비교
작업 목적에 따라 정렬, 압축, 주석 제거, 다운로드 기능을 구분해서 사용할 수 있습니다.
여러 줄과 들여쓰기를 적용해 사람이 읽기 쉬운 코드로 정리합니다. 수정, 분석, 리팩토링 작업에 적합합니다.
공백과 줄바꿈을 줄여 CSS를 짧게 만듭니다. 배포 전 파일 크기 확인이나 간단한 압축 테스트에 적합합니다.
정렬 또는 압축된 결과를 .css 파일로 저장할 수 있어 블로그 스킨, 프로젝트 파일 정리에 활용하기 좋습니다.
도움말
CSS Formatter란?
CSS Formatter는 한 줄로 붙어 있거나 들여쓰기가 깨진 CSS 코드를 보기 좋게 정렬하고, 필요할 때는 공백과 줄바꿈을 제거해 압축할 수 있는 무료 개발자 유틸리티입니다.
블로그 스킨 수정, 웹사이트 스타일 점검, 반응형 CSS 작업, 디자인 시스템 정리, 운영 중인 CSS 파일 리팩토링 작업에 활용할 수 있습니다.
지원 기능
- CSS 코드 자동 들여쓰기 및 줄바꿈 정렬
- 공백과 줄바꿈을 제거하는 CSS 한 줄 압축
- 주석 제거 옵션
- 스페이스 2칸, 4칸, 탭 들여쓰기 선택
- 선택자 개수, 속성 개수, 줄 수, 문자 수, 압축률 확인
- 변환 결과 복사 및 CSS 파일 다운로드
이런 작업에 활용할 수 있습니다
- 티스토리, 블로그, 개인 사이트 스킨 CSS 수정 전 코드 정리
- 웹페이지에서 복사한 CSS 구조 분석
- 한 줄로 압축된 CSS 코드 보기 좋게 복원
- 프로젝트 CSS 파일 리팩토링 전 구조 확인
- 반응형 media query 코드 정리
- 운영 배포 전 CSS 압축 결과 확인
자동 정렬 옵션은 어떻게 사용하나요?
입력 후 자동 정렬을 켜면 CSS 코드를 입력할 때마다 선택한 들여쓰기 기준으로 결과 영역이 자동 갱신됩니다. 긴 CSS를 붙여넣은 뒤 즉시 구조를 확인할 때 유용합니다.
주석 제거 옵션은 언제 사용하나요?
주석 제거 옵션을 켜면 정렬 또는 압축할 때 CSS 주석이 결과에서 제외됩니다. 배포용 CSS를 만들거나 코드 길이를 줄이고 싶을 때 사용할 수 있습니다.
압축률은 어떻게 계산되나요?
압축률은 입력된 CSS 길이와 결과 CSS 길이를 비교해 줄어든 비율을 표시합니다. 압축 결과가 얼마나 짧아졌는지 빠르게 확인하는 참고 지표입니다.
잘못된 CSS 문법도 자동으로 수정되나요?
이 도구는 CSS 코드를 정렬하고 압축하는 용도입니다. 잘못된 중괄호, 누락된 세미콜론, 오타가 있는 속성명 등을 완벽하게 고쳐주는 문법 검증기는 아닙니다.
다운로드한 CSS를 운영 사이트에 바로 적용해도 되나요?
다운로드한 CSS를 운영 사이트에 적용하기 전에는 반드시 테스트 환경에서 화면 깨짐, 우선순위 충돌, media query 동작 여부를 확인하는 것이 좋습니다.