CSS 정리·압축

CSS 정리·압축 사용법

CSS 코드를 읽기 좋게 펼치거나 배포용으로 줄이는 도구입니다. 정리와 압축 외에 속성 순서를 일정한 규칙으로 맞추는 정렬 기능이 있고, 처리하면서 닫히지 않은 중괄호나 빠진 세미콜론처럼 화면이 깨지는 원인이 되는 곳을 줄 번호로 알려 줍니다.

쓰는 순서

1. 입력 칸에 CSS를 붙여 넣거나 파일 열기로 불러옵니다.
2. 정리하기를 누르면 선언을 한 줄에 하나씩 들여써서 펼칩니다. 압축하기를 누르면 한 줄로 줄입니다.
3. 속성 순서를 맞추려면 속성 정렬에서 ABC순이나 종류별을 고릅니다. 정리와 압축 모두에 적용됩니다.
4. "확인할 곳"이 나오면 줄 번호를 보고 원본을 고친 뒤 다시 처리합니다.
5. 결과 복사 또는 파일로 저장으로 가져갑니다.

예시

.a{color:#FFFFFF;margin:0.5em} 을 넣고 정리하기를 누르면 .a {, color: #FFFFFF;, margin: 0.5em;, } 네 줄로 펼쳐집니다. 정리할 때는 값을 바꾸지 않습니다. 압축하기를 누르면 .a{color:#FFF;margin:.5em} 이 되어 30바이트가 26바이트로 줄어듭니다.

예시 버튼의 코드는 규칙 5개, 선언 15개입니다. 속성 정렬을 ABC순으로 바꾸면 첫 규칙의 선언이 background, border, border-radius, color, display, margin, padding, position, transition 순서로 놓입니다.

속성 정렬 방식 고르기

정렬은 한 규칙 안에서만 일어나고 규칙끼리의 순서는 바꾸지 않습니다. --main-color 같은 사용자 정의 속성은 자리를 옮기지 않습니다. 같은 속성을 두 번 쓴 대체값은 원래 앞뒤 순서를 지킵니다.

조심할 것은 묶음 속성입니다. border-top: 0; border: 1px solid; 처럼 세부 속성을 먼저 쓰고 묶음 속성으로 덮어쓴 코드는 정렬 뒤 border 가 앞으로 가면서 border-top: 0 이 살아나 화면이 달라집니다. 이런 곳은 "정렬 주의"로 표시하니 그 규칙만 직접 확인하세요.

압축이 바꾸는 것

• 줄바꿈, 들여쓰기, 선택자와 중괄호 사이의 공백, 콜론과 쉼표 뒤의 공백을 뺍니다.
• 블록의 마지막 선언 뒤 세미콜론을 뺍니다. 문법상 없어도 됩니다.
• 주석 지우기: /* */ 를 뺍니다. /*! 로 시작하는 저작권 표시 주석은 남깁니다.
• 색·숫자 줄이기: #aabbcc 처럼 두 자리씩 같은 색상값을 세 자리로, 0.5 를 .5 로 줄입니다. 따옴표와 url() 안은 건드리지 않습니다.

값의 뜻이 바뀔 수 있는 변환은 하지 않습니다. 0px 의 단위 떼기, 규칙 합치기, 속성 묶기는 경우에 따라 결과가 달라질 수 있어서 넣지 않았습니다.

"확인할 곳"에 나오는 것

• 닫히지 않은 중괄호: 어느 줄에서 연 { 가 문제인지 알려 줍니다. 이 오류가 있으면 브라우저는 그 뒤의 규칙을 모두 앞 규칙의 안쪽으로 읽어 스타일이 통째로 빠집니다.
• 짝이 없는 }: 한 번 더 닫은 곳입니다.
• 세미콜론이 빠진 것 같습니다: color: red 다음 줄에 margin: 0; 이 오면 브라우저는 둘을 한 선언으로 읽고 둘 다 버립니다.
• 속성: 값 꼴이 아닙니다: 콜론이 빠졌거나 오타로 선택자가 선언 자리에 들어간 곳입니다.
• 닫히지 않은 주석과 따옴표, 괄호.

속성 이름이나 값이 실제로 있는 것인지는 검사하지 않습니다. colr: red 같은 오타는 꼴이 맞아서 그대로 통과합니다.

정리 옵션

• 쉼표로 이은 선택자를 줄마다: h1, h2, h3 를 세 줄로 나눕니다. 선택자가 길 때 바뀐 줄만 비교하기 쉽습니다.
• 규칙 사이에 빈 줄: 규칙과 규칙 사이를 한 줄 띄웁니다.

파일 여러 개를 한 번에

파일을 두 개 이상 고르면 지금 방식과 옵션으로 모두 처리해 ZIP으로 저장합니다. 압축일 때는 style.min.css 처럼 이름에 min 이 붙습니다.