CSS 포맷터 (뷰티파이·언미니파이 무료)
브라우저에서 미니파이되거나 난잡한 CSS를 2칸 또는 4칸 들여쓰기로 포맷하세요. Prettier가 아닌 단순 뷰티파이어입니다. 붙여 넣은 뒤 Format CSS를 누르세요. 파일 업로드는 없습니다.
CSS 포맷팅
CSS를 붙이고 2칸 또는 4칸 들여쓰기를 고른 뒤 포맷하세요. Prettier나 CSS 린터가 아닌 단순 들여쓰기 도구입니다.
사용 방법
- 들여쓰기 크기를 선택합니다 (2 spaces 또는 4 spaces)
- 입력 영역에 포맷팅할 CSS 코드를 입력합니다
- "Format CSS" 버튼을 클릭합니다
- 포맷팅된 결과를 복사하여 사용합니다
주요 기능
- 미니파이된 CSS를 읽기 좋게 포맷팅
- 들여쓰기 옵션 지원 (2 spaces / 4 spaces)
- 중괄호 정렬 및 줄바꿈
- 공백 정리 및 코드 정렬
- Prettier, stylelint, CSS 파서가 아님 — 문법 검증 없음
💡 참고: 포맷은 브라우저에서 실행되며 서버로 전송되지 않습니다. Prettier가 아닌 단순 들여쓰기·언미니파이 도구입니다. CSS가 유효한지 검사하지 않으며, Prettier나 stylelint를 대체하지 않습니다.
온라인 CSS 포맷터를 쓰는 이유
미니파이되거나 들여쓰기가 없는 CSS는 읽기 어렵습니다. 이 페이지는 로컬 프리티프린터입니다. { }와 ; 주변에 줄바꿈을 넣고 2칸 또는 4칸으로 들여씁니다. Prettier, stylelint, CSS 파서가 아니며, 스타일시트가 유효한지 검사하지 않습니다.
CSS를 붙이고 들여쓰기 크기를 고른 뒤 Format CSS를 누르세요. 처리는 브라우저 JavaScript로 실행되며, 코드는 Toolo 서버로 업로드되지 않습니다. :hover, ::before 같은 선택자 콜론은 붙인 채로 두고, 속성 콜론 뒤에만 공백을 넣습니다. /* */ 주석은 유지되고, // 주석 모드는 없습니다.
주요 기능 및 장점
붙여 넣은 CSS를 로컬에서 단순 들여쓰기하도록 만들어졌습니다:
클라이언트 측 프라이버시
포맷은 브라우저에서 실행됩니다. 스타일시트는 원격 서버로 업로드되거나 저장되지 않습니다.
2칸 또는 4칸 들여쓰기
기본 2칸 또는 4칸을 고를 수 있습니다. 탭 들여쓰기, Prettier 설정, 다른 스타일 프리셋은 없습니다.
중괄호·세미콜론으로 언미니파이
{ }와 ;가 있는 한 줄 CSS는 보통 여러 줄로 펼쳐집니다. 중첩 중괄호는 들여쓰기 깊이가 늘어납니다. :hover와 ::before는 그대로 둡니다. Sass/SCSS 컴파일러는 아닙니다.
무료, 계정 불필요
로그인이나 유료 플랜 없이 쓸 수 있고, 파일 크기 입력칸은 없습니다. 아주 긴 붙여넣기는 탭이 느려질 수 있습니다. 파일 선택기는 없습니다.
자주 묻는 질문 (FAQ)
CSS 코드가 외부 서버에 저장되거나 기록되나요?
아니요. 포맷은 브라우저 JavaScript로 실행됩니다. 코드는 Toolo 서버로 전송되거나 저장되지 않습니다.
미니파이된 CSS도 포맷할 수 있나요?
중괄호와 세미콜론이 있는 일반적인 미니파이 CSS는 대체로 됩니다. 줄바꿈과 들여쓰기를 되돌리며, 문법을 검증하거나 모든 선언을 완벽하게 맞추지는 않습니다.
중첩 규칙이나 커스텀 프로퍼티 같은 최신 CSS 문법을 지원하나요?
--color: red; 같은 커스텀 프로퍼티는 다른 선언처럼 포맷됩니다. 중첩 { }는 깊이만큼 들여씁니다. :hover, ::before 같은 선택자 콜론에는 여분 공백을 넣지 않습니다. 여전히 중괄호·세미콜론 기준 프리티프린터이며, CSS3나 PostCSS 엔진은 아닙니다.
이 도구는 Prettier와 같나요?
아니요. Prettier는 CSS를 AST로 파싱한 뒤 규칙에 따라 다시 출력합니다. Toolo는 브라우저에서 { }와 ; 기준으로 들여쓰기와 줄바꿈만 합니다. 그 출력이 필요하면 에디터나 CI에서 Prettier(또는 stylelint)를 쓰세요. 이 페이지는 붙여 넣은 CSS를 빠르게 언미니파이하거나 간격을 맞출 때 씁니다.