CSS

CSS 정리 / 압축 stylesheet

CSS에 들여쓰기를 적용해 읽기 쉽게 만들거나, 주석과 공백을 제거해 용량을 줄입니다.

mode

indent —

INPUTcss

0 lines 0 chars

OUTPUTformatted

0 lines 0 chars

도구 설명

이 도구가 하는 일

배포된 사이트의 CSS는 대부분 한 줄로 압축되어 있습니다. 용량을 줄이기 위해 공백과 주석을 모두 제거하기 때문인데, 이 상태로는 어떤 선택자에 어떤 속성이 걸려 있는지 파악하기 어렵습니다.

이 도구의 beautify는 중괄호와 세미콜론을 기준으로 줄을 나누고 중첩 단계에 맞춰 들여쓰기를 넣습니다. 미디어 쿼리처럼 중첩된 블록도 단계에 맞게 정리됩니다. minify는 반대로 주석을 없애고 불필요한 공백을 제거해 한 줄로 만듭니다.

변환 과정에서 문자열 리터럴, url() 값, 주석은 따로 보호합니다. content 속성에 들어간 공백이나 파일 이름에 공백이 있는 url() 값이 공백 정리 때문에 망가지지 않도록 하기 위해서입니다.

언제 사용하나요

배포된 사이트의 압축된 스타일시트를 분석할 때, 어떤 규칙이 적용되는지 확인하기 위해 개발자 도구에서 복사해 온 CSS를 정리할 때, 인라인으로 넣을 스타일의 용량을 줄일 때, 여러 사람이 작성한 CSS의 들여쓰기를 통일할 때 사용합니다.

입력과 출력 예시

입력 .card{color:#fff;padding:12px}@media (max-width:600px){.card{padding:8px}}

출력

.card {
  color: #fff;
  padding: 12px
}
@media (max-width:600px) {
  .card {
    padding: 8px
  }
}

미디어 쿼리 안쪽 규칙이 한 단계 더 들여쓰기됩니다.

입력 /* 주석 */ .a{color:red}

출력 .a{color:red}

minify 방향에서는 주석이 제거됩니다.

주의사항

CSS의 규칙은 순서에 따라 우선순위가 달라집니다. 이 도구는 순서를 바꾸지 않고 공백만 조정하지만, 결과를 붙여 넣을 때 기존 규칙의 위치가 바뀌지 않도록 주의하십시오. 또한 문법 검사기가 아니므로 잘못된 속성명이나 오타는 걸러내지 못합니다. 압축 결과를 운영에 반영하기 전에는 실제 화면에서 스타일이 그대로 적용되는지 확인해야 합니다.

자주 묻는 질문

url() 안의 공백이 사라지지 않나요?

사라지지 않습니다. 문자열과 url() 값은 변환 전에 따로 보호한 뒤 복원하므로 내부 공백이 그대로 유지됩니다.

문법 오류도 잡아 주나요?

잡지 않습니다. 공백과 줄바꿈만 조정하는 도구이므로 속성명 오타나 잘못된 값은 브라우저 개발자 도구로 확인해야 합니다.