CSS 포매터
지저분하거나 압축된 CSS를 브라우저에서 정리합니다.
예시
압축된 CSS 정리
입력
.btn{color:#fff;background:#000;padding:8px 16px;}출력
.btn {
color: #fff;
background: #000;
padding: 8px 16px;
}일관성 없는 간격 정리
입력
a{color:blue;} a:hover{color:red;}출력
a {
color: blue;
}
a:hover {
color: red;
}도구 소개
이 무료 온라인 CSS 포매터는 지저분하거나 압축된 스타일시트를 깔끔하게 들여쓴 CSS로 바꿉니다 — 빠른 CSS 정리·pretty-print 도구입니다. CSS를 붙여넣고 들여쓰기 스타일을 고르면 포맷된 결과가 즉시 나타납니다. 모든 것이 업로드 없이 브라우저에서 실행되어 코드가 기기를 떠나지 않습니다.
사용 방법
- 입력란에 CSS를 붙여넣으세요(샘플을 눌러 체험).
- 공백 2칸·4칸·탭 중 들여쓰기를 고르세요.
- 오른쪽 출력란에서 정리된 CSS를 확인하세요.
- 복사 버튼으로 결과를 복사하세요.
CSS 포매터는 언제 쓰나
빌드된 번들에서 압축 CSS를 복사했을 때, 간격이 일관성 없는 스타일시트를 넘겨받았을 때, 또는 편집 전에 규칙을 읽고 싶을 때 유용합니다. 일관된 들여쓰기는 선택자와 중첩을 분명히 하고 diff를 깔끔하게 유지합니다.
자주 묻는 질문
이 CSS 포매터는 무료인가요?
네 — 가입도 제한도 없는 완전 무료 온라인 CSS 포매터·정리 도구입니다. 원하는 만큼 CSS를 포맷·들여쓰기하세요.
제 CSS가 서버로 업로드되나요?
아니요. 업로드 없는 도구입니다 — CSS가 전적으로 브라우저에서 포맷되므로 코드가 기기를 떠나지 않습니다. 비공개·내부 스타일시트에 안전합니다.
CSS 정리 도구는 무엇을 하나요?
각 규칙과 선언을 각자 줄에 놓고, 중괄호·콜론·세미콜론 주변 간격을 정규화하고, 전체를 다시 들여써서 압축되거나 지저분한 CSS를 읽기 쉽게 만듭니다.
들여쓰기를 고를 수 있나요?
네 — 공백 2칸, 4칸, 또는 탭을 고르세요. 선택은 브라우저에 저장되어 다음에도 유지됩니다.
SCSS나 Less도 되나요?
구조가 CSS와 비슷해서 대부분의 SCSS·Less 문법을 들여쓰기·정리 면에서 잘 처리합니다. 컴파일이 아니라 포맷이므로 중첩이나 변수를 펼치지는 않습니다.
압축된 CSS를 펼치나요?
네. 한 줄이거나 압축된 스타일시트를 붙여넣으면 제대로 들여쓴 읽기 쉬운 규칙 집합으로 다시 펼칩니다.
오프라인과 모바일에서도 되나요?
페이지가 로드된 후에는 로컬에서 실행되어 불안정한 연결에서도 동작하며, 레이아웃은 휴대폰·태블릿에서 완전 반응형입니다.
관련 도구