Softonic

CSS 포매터

단계 1 / 2
CSS 서식 지정

DevTools에서 프로덕션 스타일시트를 열면 모든 게 한 줄에 있습니다. 이 포매터는 압축된 CSS를 읽기 좋은 형태로 풀어냅니다: 줄마다 선언 하나, 두 칸 들여쓰기, 규칙 사이 빈 줄. 원시 CSS, Sass 또는 PostCSS 출력, 인라인 <style> 블록 안의 CSS에 모두 작동합니다. 붙여넣은 CSS는 정렬을 위해 저희 서버로 전송되며, 도구의 단계 사이를 이동하는 동안 페이지 링크에 실립니다. 정렬 중에 블록 주석은 제거됩니다.

CSS 정렬 방법

  1. 1

    CSS 붙여넣기

    한 줄로 압축된 것, 일부만 정렬된 것, 이미 보기 좋은 것 모두. 파서는 상관하지 않습니다.

  2. 2

    정렬

    CSS 정렬 버튼을 누릅니다. 각 선언은 두 칸 들여쓰기로 자기 줄에 옮겨지고, 규칙 사이에는 빈 줄이 들어갑니다.

  3. 3

    확인

    결과를 살펴봅니다. 속성 순서는 보존되지만 블록 주석은 제거됩니다.

  4. 4

    복사

    정렬된 CSS를 클립보드로 복사해 프로젝트에 다시 붙여넣습니다.

전과 후

입력 (압축):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

출력 (정렬됨):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

포매터가 하는 일

동작 값
선언 줄마다 하나, 두 칸 들여쓰기
규칙 사이 빈 줄 1
여는 중괄호 선택자와 같은 줄
닫는 중괄호 자기 줄에 배치
속성 순서 보존되며, 다시 정렬되지 않음
블록 주석 정렬 중에 제거

포매터가 지우는 것

/* 이 주석은 정렬하면 사라집니다 */
.button { background: #2563eb; }

블록 주석(/* ... */)은 출력에서 빠집니다. 필요하다면 정렬 전에 원본 파일의 사본을 보관하세요.

중첩 규칙 처리 (Sass / 최신 CSS 중첩)

포매터는 중첩된 규칙을 그 깊이에 맞춰 들여씁니다:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

(& 없는) Sass/Less 문법도 허용됩니다. @mixin, @include, @extend 같은 Sass 전용 at-rule은 그대로 통과하지만 깊이 재정렬되지는 않습니다. 완전한 Sass 정렬은 Prettier 같은 Sass 인식 도구를 쓰세요.

정렬하지 말아야 할 때

  • 프로덕션에서: 정렬이 아니라 압축하세요. 정렬된 CSS는 압축된 것보다 2-3배 큽니다.
  • diff 전에: 양쪽을 모두 정렬하세요. 압축 파일을 보기 좋은 파일과 diff하면 읽을 수 없는 diff가 나옵니다.
  • 빌드 파이프라인 안에서: Prettier나 프레임워크의 포매터가 일관성을 처리하게 하세요. 이 도구는 일회성 정리에 쓰세요.

자주 묻는 질문

표준 CSS와 CSS Nesting(2023년 스펙)을 처리합니다. @mixin, @include, @extend, $ 변수 같은 Sass 전용 문법은 그대로 통과하지만 깊이 재정렬되지는 않습니다. 완전한 Sass 정렬은 Prettier 같은 Sass 인식 도구를 쓰세요.

네. 정렬은 저희 서버에서 실행되므로, 붙여넣은 CSS는 정렬 요청마다 함께 전송되고 도구의 단계 사이를 이동하는 동안 페이지 링크에 실립니다. 어떤 계정에도 저장되지 않으며 이후에 재사용되지 않습니다.

문법적으로 유효하다면 아니요. CSS의 공백은 값 바깥에서는 무의미하며, 포매터는 공백과 줄바꿈만 재배치합니다. 선언 순서와 값 자체는 보존됩니다.

네. <style> 태그 안의 CSS를 복사해 붙여넣고 정렬한 뒤 다시 붙여넣으세요. 포매터는 CSS만 다루므로, 주변 HTML이 아니라 CSS 내용을 붙여넣으세요.

출력을 일관되게 유지하기 위해 포매터가 블록 주석(/* ... */)을 제거합니다. 유지하고 싶다면 정렬 전에 원본 CSS의 사본을 저장하세요.

관련 도구

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이 도구는 다른 언어로도 제공됩니다