분류: 개발 도구
CSS 포매터
2칸 또는 4칸 들여쓰기로 CSS를 로컬에서 정렬하거나 압축
CSS를 붙여넣으면 2칸 또는 4칸 들여쓰기로 보기 좋게 정렬하거나, 안전한 범위에서 가장 작은 크기로 압축합니다. 정렬 시 주석은 유지됩니다. 모든 처리가 브라우저에서 이루어집니다.
브라우저에서 정렬했습니다.
결과
.tool-panel {
display:grid;
gap:16px;
padding:16px
}
/* accent border */
.tool-panel .tool-output {
border:1px solid var(--line);
border-radius:8px
}이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
CSS 포매터는 규칙과 선언을 다시 들여써서 중첩된 선택자와 미디어 쿼리를 한눈에 훑어볼 수 있게 하며, 압축기는 주석과 불필요한 공백을 제거해 프로덕션용 스타일시트 용량을 줄입니다. 이 도구는 공백만 재배치할 뿐 주어진 CSS를 평가하거나 실행하지 않습니다.
사용 방법
- CSS를 입력창에 붙여넣거나 예제를 불러옵니다.
- 읽기 좋은 결과를 원하면 정렬을, 최소 크기를 원하면 압축을 선택합니다.
- 결과를 복사합니다. 정렬 결과는 2칸 또는 4칸 들여쓰기를 고를 수 있습니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 제 CSS가 어딘가로 업로드되나요?
- 아니요. 정렬과 압축은 페이지 안에서 실행되는 자바스크립트로 이루어지므로 스타일시트가 기기를 떠나지 않습니다.
- 주석은 유지되나요?
- 정렬 결과는 주석을 별도 줄에 그대로 유지하고, 압축 결과는 대부분의 프로덕션 빌드 도구와 마찬가지로 주석을 제거합니다.
- CSS 유효성을 검사하나요?
- 아니요. 공백과 들여쓰기만 재배치하므로 속성 이름의 오타나 잘못된 값은 잡아내지 못합니다.