본문으로 건너뛰기
yutils
예시

입력 (압축된 CSS)

.btn{padding:8px 16px;border-radius:6px;background:#5b21b6;color:#fff}.btn:hover{background:#4c1d95}

출력 (포맷팅)

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: #5b21b6;
  color: #fff
}

.btn:hover {
  background: #4c1d95
}

참고

선택자 · 미디어 쿼리 · @keyframes 모두 들여쓰기 처리됩니다. CSS-in-JS 인라인 스타일은 다른 도구가 필요합니다.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • minified CSS bundle 의 가독성 복구 (Tailwind · CSS-in-JS 등)
  • 이슈 · Slack 에 CSS 붙여 넣기 전 정리
  • media query · @keyframes 등 중첩 룰 구조 시각화
  • AI 가 생성한 한 줄 CSS 의 들여쓰기 보정
  • minify 모드로 production CSS 1차 압축

자주 묻는 질문

Q.선택자 · 속성 순서가 바뀌나요?
A.포매팅 모드는 바뀌지 않습니다 — 들여쓰기와 공백만 정리합니다. 압축 모드는 의미가 같은 범위에서 바꿉니다 — 값을 짧게 쓰고(blue → #00f, 0.5 → .5), 한 규칙 안의 속성 순서를 바꾸며, 뒤에서 덮어써 효과가 없는 선언을 지우고, 내용이 같은 이웃 규칙을 합칩니다.
Q.CSS 중첩(nesting)도 되나요?
A.포매팅과 압축 모두 됩니다. 압축은 중첩을 펼치지 않고 그대로 둔 채 줄입니다 — &:hover 같은 중첩 규칙과 범위 미디어 쿼리(@media (width >= 600px))도 결과에 그대로 남습니다.
Q.SCSS · Less 도 지원하나요?
A.포매팅은 표준 CSS 기준 best-effort 라서 SCSS · Less 전용 문법(변수 · @if · 믹스인)은 정확하지 않을 수 있습니다. 압축은 표준 CSS 로 읽지 못한 부분(SCSS 변수 $x: … 등)을 결과에서 빼고 그 위치를 알려 주며, @mixin 처럼 모르는 @규칙은 그대로 둡니다. SCSS 는 먼저 CSS 로 컴파일한 뒤 압축하세요.
Q.압축하면 -webkit- 같은 접두사가 바뀌나요?
A.압축 결과는 2021년 무렵 이후 브라우저(Chrome · Edge 90, Firefox 88, Safari 14 이상)에 맞춥니다. 이 브라우저들에 아직 필요한 접두사는 붙이고(backdrop-filter 에 -webkit-backdrop-filter 추가), 필요 없는 옛 접두사(-moz-user-select 등)는 뺍니다. 이들이 모르는 최신 값 앞에 둔 대체값(height: 100vh; height: 100dvh 의 앞쪽)은 남깁니다. 다만 display · overflow 같은 일부 속성은 대체값을 두어도 마지막 값만 남으니(overflow: hidden; overflow: clip → clip), 그런 대체값이 꼭 필요하면 결과를 확인하세요.
Q.CSS 가 어딘가로 전송되나요?
A.아닙니다. 모든 처리는 브라우저에서만 수행됩니다. 압축 모드를 처음 고르면 압축 엔진(lightningcss, WebAssembly)을 이 사이트에서 받아 오지만, 입력한 CSS 는 어디로도 보내지 않습니다.
재미있는 사실

  • CSS 는 1994년 노르웨이의 Håkon Wium Lie (당시 CERN, 후에 Opera CTO) 가 W3C 에 처음 제안했고, Bert Bos 와 함께 1996년 CSS Level 1 표준을 완성했습니다. '문서 구조 (HTML) 와 표현 (CSS) 분리' 라는 단순한 아이디어가 웹 디자인의 표준 패러다임이 됐어요.

    W3C — CSS

  • CSS3 부터는 단일 spec 이 아니라 **모듈화** 됐습니다 — Selectors Level 4, Grid Layout, Flexbox 등 각각 독립적으로 발전. 그래서 'CSS4' 라는 용어는 공식적으로 X — 각 모듈이 자체 버전을 가지고 진화해요.

    W3C — CSS current work

  • 1990년대 후반의 'browser war' 시기엔 IE 와 Netscape 가 비표준 CSS 확장을 경쟁적으로 박아서 호환성이 악몽이었습니다. CSS 의 cascade·specificity 규칙이 복잡해 보이는 이유 중 하나 — 그 시대의 의도하지 않은 다양성을 일관되게 처리하기 위한 설계.

    Wikipedia — Browser wars

관련 가이드

관련 도구

이 카테고리 모든 도구 보기 →