CSS 포매터: CSS 코드 정렬과 압축(Minify) 온라인 도구

CSS 포매터가 하는 일

CSS 포매터는 스타일시트의 의미는 그대로 두고 배치만 다시 씁니다. 규칙마다 블록이 따로 생기고, 선언은 한 줄에 하나씩 놓이며, 미디어 쿼리 같은 중첩 블록은 한 단계 더 들여쓰기됩니다. 결과는 같은 CSS이지만 읽고, 리뷰하고, 고치기가 훨씬 쉬워집니다. 이 도구 하나로 CSS 정렬(뷰티파이)과 CSS 압축을 모두 처리할 수 있습니다.

압축된 파일에서 스타일을 복사했을 때, 오랜 기간 손으로 고쳐 온 테마를 열었을 때, 브라우저 개발자 도구에서 CSS를 가져왔을 때 유용합니다. 코드 리뷰 전에도 도움이 됩니다. 포맷이 일관되면 diff에 실제 변경 사항만 나타나기 때문입니다.

CSS 포매터 사용 방법

왼쪽 상자에 CSS를 붙여넣습니다. 붙여넣는 즉시 정렬됩니다.
또는 파일 열기를 눌러 기기에 있는 .css 파일을 불러오거나, 예시를 눌러 예제 코드로 시험해 봅니다.
원하는 들여쓰기를 고릅니다. 공백 2칸, 공백 4칸, 탭 중에서 선택할 수 있습니다.
줄 너비를 정합니다. 긴 선택자 목록과 값은 이 너비를 넘으면 줄이 바뀝니다.
프로젝트에서 "Inter"보다 'Inter'를 선호한다면 작은따옴표를 켭니다.
포맷(또는 Ctrl+Enter)을 눌러 정렬하거나, 압축(Minify) 버튼을 눌러 압축합니다.
복사 또는 다운로드를 눌러 결과를 가져갑니다.

한 번 포맷한 뒤에는 입력하는 동안 결과가 계속 갱신됩니다. CSS에 문법 오류가 있으면 상자 아래 메시지가 위치를 알려 주고, 입력에서 보기를 누르면 그 위치로 바로 이동합니다.

정렬 전과 후

압축된 CSS 한 덩어리입니다.

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

공백 2칸으로 포맷한 결과입니다.

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

자식 결합자 > 양쪽에 공백이 들어가고, 선택자 목록의 선택자가 한 줄에 하나씩 놓이며, 미디어 쿼리 안의 규칙이 들여쓰기된 것을 볼 수 있습니다. 주석은 작성한 자리에 그대로 남습니다.

CSS 압축하기

압축(Minify) 버튼은 반대 방향으로 작동합니다. 주석과 브라우저에 필요 없는 공백을 지웁니다. 위에서 정렬한 코드에 실행하면 다시 한 줄이 됩니다.

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

이 압축기는 일부러 조심스럽게 동작합니다. div :first-child의 공백은 지우면 선택자의 의미가 바뀌므로 남겨 둡니다. calc(100% - 2rem) 안의 공백도 calc에 꼭 필요하므로 유지합니다. 문자열과 url() 값은 건드리지 않습니다. /*!로 시작하는 주석은 보통 라이선스 문구를 담고 있으므로 남겨 둡니다.

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

중복 규칙 병합, 색상 코드 축약, 사용하지 않는 선택자 제거는 하지 않습니다. 그 수준의 최적화가 필요하다면 프로젝트에서 cssnano나 Lightning CSS 같은 빌드 도구를 사용하세요.

오류 메시지 읽는 법

포매터는 올바른 CSS가 있어야 작동합니다. 중괄호가 하나 빠지면 다음과 같은 메시지가 나옵니다.

1행 1열: Unclosed block

행과 열은 문제 위치를 뜻합니다. Unclosed block은 CSS 파서가 내는 영어 메시지로 “닫히지 않은 블록”이라는 뜻이며, 이 위치는 열렸지만 닫히지 않은 블록을 가리킵니다. 흔한 원인은 규칙 끝의 } 누락, 선택자 뒤에 잘못 들어간 {, 닫히지 않은 주석입니다. 문제를 고친 뒤 다시 포맷을 누르세요.

이 도구는 속성 이름이나 값이 실제로 존재하는지는 확인하지 않습니다. colr: red는 문법상 올바르므로 오류로 표시되지 않고 그대로 정렬됩니다. 이런 실수는 Stylelint 같은 린터가 잡아 줍니다.

팁

프로젝트에서 이미 다른 방식을 쓰고 있지 않다면 공백 2칸을 쓰세요. CSS 스타일 가이드에서 가장 흔한 선택입니다.
압축된 파일은 빌드 결과물로, 정렬된 파일은 원본 소스로 관리하세요. 압축된 CSS를 손으로 고치면 실수하기 쉽습니다.
CSS가 HTML 파일의 style 태그 안에 있다면 페이지 전체를 HTML 포매터에 붙여넣으세요. 인라인 CSS까지 함께 정렬합니다.
중첩과 $variables를 쓰는 Sass 파일은 SCSS 포매터에서 정렬하세요.

CSS를 정렬하는 다른 방법

VS Code: 파일을 열고 Format Document(문서 서식)를 실행합니다. 단축키는 Windows에서 Shift+Alt+F, macOS에서 Shift+Option+F입니다. Prettier 확장을 설치하면 이 페이지와 같은 결과를 얻을 수 있습니다.
명령줄: npx prettier --write styles.css를 실행하면 Prettier가 파일을 그 자리에서 정렬합니다.
브라우저 개발자 도구: Chrome과 Firefox의 Sources(소스) 패널에는 압축된 스타일시트를 보기 좋게 펼쳐 주는 pretty print 버튼이 있습니다. 읽기에는 충분하지만 들여쓰기 너비 같은 설정은 고를 수 없습니다.

아무것도 설치하고 싶지 않을 때나 다른 곳에서 가져온 코드를 빠르게 확인해야 할 때 이 페이지가 편리합니다. 스크립트도 다룬다면 같은 엔진과 옵션을 쓰는 자바스크립트 포매터를 이용해 보세요.

CSS 포매터 자주 묻는 질문

CSS가 어딘가로 업로드되나요?

아니요. 포매터는 브라우저 안에서 실행됩니다. 스타일시트가 서버로 전송되지 않으므로 비공개 프로젝트의 코드도 붙여넣을 수 있습니다.

CSS를 압축하면 페이지 모양이 바뀌나요?

바뀌지 않아야 정상입니다. 압축(Minify) 버튼은 브라우저가 무시하는 주석과 공백, 그리고 각 블록의 마지막 세미콜론만 지웁니다. 규칙의 이름을 바꾸거나 합치거나 순서를 바꾸지 않으며, /*!로 시작하는 주석은 남겨 두므로 라이선스 문구도 유지됩니다.

Unclosed block이라는 메시지는 왜 나오나요?

{로 연 규칙을 }로 닫지 않았다는 뜻입니다. 표시된 줄과 열은 아직 닫히지 않은 블록이 시작되는 위치를 가리킵니다. 빠진 중괄호를 추가하고 다시 포맷을 누르세요.

SCSS나 Less도 정렬할 수 있나요?

이 페이지는 일반 CSS만 읽습니다. 중첩, 변수, 믹스인을 쓰는 Sass 파일은 SCSS 파서를 사용하는 SCSS 포매터를 이용하세요.

어떤 포맷 규칙을 따르나요?

많은 팀이 에디터와 CI에서 쓰는 포매터인 Prettier 3를 사용합니다. 속성은 한 줄에 하나씩, 콜론 뒤에는 공백 한 칸, 선택자 목록은 선택자마다 한 줄씩 씁니다.

CSS 포매터: CSS 정렬과 압축