온라인 CSS 뷰티파이어/포매터

CSS 포매팅 도구의 주요 기능

이 도구는 CSS 코드를 읽기 쉽게 정리하거나 파일 크기를 줄이는 데 도움을 줍니다. 예를 들어, body{color:red;margin:0;}를 뷰티파이하면 다음과 같이 여러 줄로 나뉩니다:

body {
  color: red;
  margin: 0;
}

미니파이하면 주석을 제거하고 공백을 최소화하여 body{color:red;margin:0}처럼 출력합니다.

뷰티파이와 미니파이의 차이

뷰티파이는 공백을 정리하고 중괄호와 세미콜론을 기준으로 줄을 나누며 들여쓰기를 적용합니다. 미니파이는 블록 주석을 제거하고 중괄호, 콜론, 세미콜론, 쉼표 주변의 공백을 제거하며 닫는 중괄호 바로 앞의 세미콜론을 제거합니다.

제한 사항

이 도구는 가벼운 텍스트 포매터로, 완전한 CSS 파서나 검증기가 아닙니다. 복잡한 문자열, 사용자 정의 속성 값, data URL, 지시어로 사용되는 주석 또는 잘못된 CSS는 브라우저나 빌드 파이프라인에서 확인해야 합니다. 속성 순서를 변경하거나 벤더 프리픽스를 추가하지 않으며, 호환성 테스트나 선택자 수정을 수행하지 않습니다.

자주 묻는 질문

Q1: 뷰티파이 결과에서 들여쓰기 간격을 어떻게 변경하나요?

입력 전에 공백 2칸, 공백 4칸 또는 탭 중 하나를 선택하면 됩니다. 선택한 간격이 출력에 적용됩니다.

Q2: 미니파이 시 주석이 제거되나요?

네, 미니파이 과정에서 블록 주석(/* ... */)이 제거됩니다. 그러나 주석이 지시어로 사용되는 경우에는 결과가 예상과 다를 수 있으므로 주의하세요.

Q3: 입력 크기에 제한이 있나요?

한 번에 최대 500,000자까지 입력할 수 있습니다. 그 이상은 오류가 발생할 수 있습니다.

체크리스트

• CSS 코드를 입력했는지 확인
• 원하는 들여쓰기 간격 선택
• 뷰티파이 또는 미니파이 실행
• 결과를 복사하여 사용