🎨

CSS / SCSS 포매터 & 압축기 CSS & SCSS Studio

CSS3 및 SCSS 코드 자동 들여쓰기 정렬, 한 줄 압축(Minify), 속성 정렬, 0단위/Hex 최적화 및 실시간 라이브 프리뷰

✅준비 완료: CSS 또는 SCSS 코드를 입력하세요.

입력: 0자출력: 0자절감: 0%

INPUTCSS / SCSS 소스 코드

OUTPUT결과

오래된 CSS에 남아있는 `-webkit-`, `-moz-`, `-ms-`, `-o-` 구형 프리픽스를 감지하고 현대 웹 표준 문법으로 일괄 정리합니다.

-webkit- 발견:0개

-moz- 발견:0개

-ms- 발견:0개

-o- 발견:0개

프리픽스 정리 결과 미리보기

입력된 CSS 스타일이 아래 샘플 UI 컴포넌트에 실시간 격리 적용됩니다.

Featured

작성한 스타일시트 규칙이 실시간으로 반영되어 디자인을 즉시 검토할 수 있습니다.

이메일 주소

스타일 자동 적용

💡

CSS 주석, 들여쓰기, 불필요한 세미콜론 및 공백을 제거하면 파일 용량을 최대 40~60% 절감하여 First Contentful Paint(FCP) 속도를 극대화할 수 있습니다.

0px, 0rem, 0% 대신 0을 사용하고, #ffffff 대신 #fff로 축약하면 바이트 수를 미세하게 추가 절감합니다.

SCSS의 & 중첩은 편리하지만 3단계 이상 깊어지면 생성되는 CSS 선택자 특이도(Specificity)가 지나치게 높아지므로 최대 2~3단계를 유지하는 것이 좋습니다.

SCSS 빌드 시점 변수($color) 대신 런타임에 동적으로 변경 가능한 CSS 변수(var(--primary-color))를 결합하면 다크 모드 구현이 매우 수월해집니다.

💬