🎨 CSS 포매터

CSS 코드를 정렬·압축합니다. 속성 알파벳 정렬도 지원합니다.

들여쓰기:
입력 CSS
결과

📖 사용방법

  1. CSS 코드를 왼쪽 입력란에 붙여넣습니다.
  2. 정렬 버튼: 들여쓰기와 줄바꿈을 적용해 읽기 좋게 변환합니다.
  3. 압축 버튼: 불필요한 공백을 제거해 파일 크기를 줄입니다.
  4. 속성 알파벳 정렬 옵션을 켜면 각 선택자 내 속성이 A→Z 순으로 정렬됩니다.
  5. 결과를 복사 버튼으로 클립보드에 복사합니다.

🎨 CSS 포매터 실제 사용 예시

입력
압축된 `.card{color:red;margin:0}`
예상 결과
규칙과 선언을 줄 단위로 정렬
확인 사항
문자열·data URI·최신 중첩 문법 보존 여부 확인

처리 방식

입력한 코드와 문자열은 현재 브라우저에서 변환하며 FreeTools 서버로 전송하지 않습니다.

🎨 CSS 포매터 사용 가이드

CSS 코드를 보기 좋게 정렬(beautify)하거나 압축(minify)합니다. 속성 알파벳 정렬, 구문 강조 지원.

권장 사용 순서

  1. 운영 데이터 대신 짧은 샘플을 먼저 입력해 형식과 옵션을 확인한 뒤 실제 작업에 적용하세요.

결과 확인 방법

중괄호·선언의 구분과 선택자 순서를 확인하세요. 사용자 정의 속성·중첩·최신 문법은 도구가 다루는 범위와 브라우저 지원이 다를 수 있습니다.

처리 범위와 제한사항

정리 후 실제 화면에서 우선순위와 미디어쿼리 동작을 확인하세요. CSS 포매팅은 브라우저 호환성 검사를 수행하지 않습니다.

기능 및 설명 검토: FreeTools 운영팀 · 2026-07-31

관련 도구

🗜️코드 미니파이어🌐HTML 에디터🎨색상 변환기🌈CSS 그라디언트📐CSS 단위 변환