이미지 PDF 오디오·비디오 텍스트 개발자 데이터·수학 네트워크 보안·프라이버시 디자인·컬러 생산성 문서 한국 재미·기타

CSS 정렬·압축

CSS Beautifier & Minifier

선언 순서를 바꾸지 않고 CSS를 정렬하거나 압축하며, 토큰 구성을 그대로 보존합니다.

스타일시트를 읽기 좋게 펼치거나 반대로 줄입니다. 어느 방향이든 실행할 때마다 토큰 열로 대조하므로, 출력은 공백만 다른 같은 스타일시트입니다. 단축 속성을 합치지도, 색을 줄이지도, 규칙 순서를 바꾸지도 않습니다.

🔒 브라우저 안에서만 처리cssformatminifyweb

모드

들여쓰기

선택자 한 줄에 하나

규칙 사이 빈 줄

주석 유지

CSS 입력

.css 파일 놓기

이 탭에서 읽습니다. 올라가지 않습니다.

정렬 결과

/*! theme v2 */

:root {
  --brand: #0af;
  --gap: calc(1rem + 2px);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

@media (min-width:40rem) {
  .card {
    display: grid;
    gap: var(--gap);
  }
}

.card::after {
  content: "{ not a block; }";
  background: url(dots;grid.png) no-repeat;
}

a:hover,
:is(button,summary):focus-visible {
  outline: 2px solid var(--brand);
}

규칙

5

선택자

9

선언

9

@ 규칙

1

사용자 정의 속성

2

사용 방법

CSS를 붙여넣거나 파일을 놓습니다
중첩된 @ 규칙, 사용자 정의 속성, `:is()`를 비롯한 최신 선택자를 모두 파싱합니다. 아래 줄에 규칙·선택자·선언·사용자 정의 속성 개수가 실시간으로 나옵니다.
쓰는 스타일에 맞춰 정렬합니다
들여쓰기 폭, 선택자를 한 줄에 하나씩 쓸지 여럿을 쓸지, 규칙 사이 빈 줄, 주석 유지 여부입니다. 스타일시트마다 실제로 갈리는 건 이 네 가지입니다.
또는 압축하고 라이선스 표기는 남깁니다
`/*!` 관례는 압축해도 남아야 하는 주석을 뜻합니다. 그 설정이 이를 지키고, 전·후·절약 수치가 애초에 할 만한 일이었는지 알려 줍니다.

자주 묻는 질문

`#ffffff`를 왜 `#fff`로 안 줄이나요?

"안전한" 재작성마다 그렇지 않은 스타일시트가 하나씩 있기 때문입니다. 색 줄이기, 단축 속성 합치기, 선언 순서 바꾸기, "중복된" 규칙 버리기는 각각 어딘가에서 동작을 바꿉니다. 페이지를 조용히 망가뜨리는 압축기는 바이트를 덜 줄이는 압축기보다 나쁩니다. 어차피 gzip이 차이의 대부분을 회수합니다.

"토큰 단계 문제"는 뭔가요?

토크나이저가 해석하지 못한 자리입니다. 닫히지 않은 주석, 파일 끝까지 이어진 문자열, 짝 없는 중괄호 같은 것들입니다. 바이트 오프셋과 함께 알려 주고 정렬은 계속합니다. 규칙 하나가 깨진 스타일시트도 읽을 가치는 있으니까요.

벤더 프리픽스를 붙여 주나요?

아니요. 프리픽스를 붙이려면 지원 대상 브라우저와 속성별로 무엇이 필요한지의 데이터베이스가 있어야 하고, 둘 다 달마다 바뀝니다. Autoprefixer의 일이고, 제대로 하려면 빌드 단계가 필요합니다.

세미콜론이 든 URL도 견디나요?

견딥니다. `url(dots;grid.png)`도, `content: "{ not a block; }"` 같은 문자열도 안의 문장부호로 쪼개지 않고 하나의 값으로 토큰화합니다. 순진한 포매터가 틀리는 자리라서 페이지의 예시에 일부러 넣어 두었습니다.

이 도구로 이어지는 것

스프라이트 시트 만들기

Sprite Sheet Packer

여러 이미지를 하나의 아틀라스로 묶고 대응하는 CSS 또는 JSON 좌표표를 함께 만듭니다.

브라우저 안에서만 처리

HTML 정렬·압축

HTML Beautifier & Minifier

HTML을 정렬하거나 압축하며 인라인 요소를 보존하고 공백 축약 여부를 고를 수 있습니다.

브라우저 안에서만 처리

자바스크립트 정렬·압축

JavaScript Beautifier & Minifier

자바스크립트·타입스크립트의 주석과 공백만 지워 압축하고, 한 줄로 뭉친 번들을 다시 들여써서 읽을 수 있게 만듭니다. 이름을 바꾸거나 구문을 다시 쓰지는 않습니다.

브라우저 안에서만 처리

CSS 그라디언트 생성

CSS Gradient Builder

정지점을 끌어 선형·원형·원뿔 그라디언트를 만들고 sRGB 또는 OKLCH CSS를 내보냅니다.

브라우저 안에서만 처리

다음 단계

이 도구의 결과를 그대로 받을 수 있는 도구들입니다.

CSS 토큰 추출

CSS Token Extractor

스타일시트에서 색·간격·모서리·글꼴 값을 뽑아 커스텀 속성 세트를 제안합니다.

브라우저 안에서만 처리

HTML 정렬·압축

HTML Beautifier & Minifier

HTML을 정렬하거나 압축하며 인라인 요소를 보존하고 공백 축약 여부를 고를 수 있습니다.

브라우저 안에서만 처리

자바스크립트 정렬·압축

JavaScript Beautifier & Minifier

자바스크립트·타입스크립트의 주석과 공백만 지워 압축하고, 한 줄로 뭉친 번들을 다시 들여써서 읽을 수 있게 만듭니다. 이름을 바꾸거나 구문을 다시 쓰지는 않습니다.

브라우저 안에서만 처리

SVG CSS 데이터 URI 변환

SVG to CSS Data URI

SVG를 CSS 배경용 데이터 URI로 인코딩하며 꼭 필요한 문자만 이스케이프해 크기를 줄입니다.

브라우저 안에서만 처리

Base64 인코딩·디코딩

Base64 Encoder & Decoder

텍스트와 파일을 Base64·Base64URL로 인코딩·디코딩하며 UTF-8을 올바르게 처리합니다.

브라우저 안에서만 처리

curl 코드 변환

curl to Code

curl 명령을 fetch·axios·파이썬 requests·Go·PHP·PowerShell 코드로 변환합니다.

브라우저 안에서만 처리