CSS 압축·포맷 도구 소개

스타일시트는 손으로 고칠 때와 서버에 올릴 때 필요한 모양이 서로 다릅니다. 고칠 때는 줄이 나뉘고 들여쓰기가 잡혀 있어야 눈에 들어오고, 올릴 때는 공백 한 글자라도 줄여야 내려받는 용량이 줄어듭니다. 이 페이지는 그 두 가지 모양을 버튼 하나로 오가게 만든 변환기예요. 위쪽 정렬(Beautify)과 압축(Minify) 중 하나를 고르고 아래 칸에 CSS를 붙여넣으면 됩니다.

압축 모드는 주석을 지우고, 연속된 줄바꿈과 공백을 한 칸으로 모은 뒤, 중괄호와 콜론 세미콜론 쉼표 그리고 자식·형제 결합자 주변의 공백을 걷어냅니다. 블록 끝의 마지막 세미콜론도 함께 지워요. 정렬 모드는 먼저 같은 방식으로 한 줄로 만든 다음, 여는 중괄호마다 두 칸씩 들여쓰기를 늘리며 속성을 한 줄에 하나씩 다시 펼칩니다. 그래서 원래 파일에 어떤 들여쓰기가 들어 있었든 결과는 같은 규칙으로 통일됩니다.

결과 아래에는 글자 수가 함께 표시됩니다. 압축 모드에서는 원본 글자 수와 압축 후 글자 수, 그리고 몇 퍼센트가 줄었는지를 보여주기 때문에 minify를 거는 게 실제로 얼마나 이득인지 바로 가늠할 수 있어요. 처리는 정규식 기반이라 아주 빠르지만, 그만큼 CSS 문법을 완전히 파싱하지는 않습니다. 문자열 값 안에 중괄호나 세미콜론이 들어 있는 특이한 CSS라면 결과를 한 번 눈으로 확인해 보세요.

사용 방법

1. 맨 위 버튼에서 정렬 또는 압축을 선택합니다.
2. CSS 입력 칸에 스타일시트를 붙여넣습니다. 입력하는 동안 결과가 바로 갱신됩니다.
3. 결과 칸 아래의 글자 수·절감률을 확인합니다.
4. 결과 복사를 눌러 클립보드에 담고, 새 파일에 붙여넣으면 끝입니다.
5. 다른 CSS를 넣으려면 지우기로 입력칸을 비웁니다.