CSS 포맷터 · 압축기
CSS를 규칙마다 줄을 나눠 펴거나, 공백과 줄바꿈을 걷어내 줄입니다. 줄이기는 없어도 되는 것만 없앱니다 — 색을 짧게 쓰거나 속성을 합치는 일은 하지 않습니다. 몇 바이트 아끼려다 남의 화면을 깨뜨릴 이유가 없습니다.
붙여넣은 코드는 기기를 벗어나지 않습니다. 브라우저 안에서만 처리하고 어디에도 보내거나 저장하지 않습니다. 사내 설정 파일이나 운영 쿼리처럼 밖으로 내보내기 곤란한 것도 그래서 쓸 수 있습니다.
펴기가 하는 일
중괄호와 세미콜론을 기준으로 줄을 나눕니다. 선택자와 여는 중괄호가 한 줄, 선언 하나가 한 줄, 닫는 중괄호가 한 줄입니다. 들여쓰기는 중괄호 깊이를 따르므로 @media 안의 규칙은 한 단 더 들어갑니다. 원래 줄바꿈은 버리고 다시 넣으므로 한 줄로 눌린 파일도 같은 모양으로 나옵니다. 따옴표와 괄호 밖의 콜론·쉼표 뒤에는 한 칸을 띄우고, url(a,b) 안은 건드리지 않습니다. 주석은 펴기에서는 모두 남습니다.
줄이기가 지키는 것
따옴표 안은 통째로 들고 갑니다. content: "a b" 의 공백 두 칸도 그대로입니다. 걷어내는 것은 연이은 공백, 중괄호·콜론·세미콜론·쉼표·>·~·+ 둘레의 공백, 블록 마지막 세미콜론입니다. 따옴표 없이 적은 url() 안은 다른 글과 같이 다룹니다. 세미콜론이 든 data: 주소는 따옴표로 감싸 두세요.
바이트 수를 읽는 법
결과 위의 숫자는 글자 수가 아니라 UTF-8 바이트입니다. 서버가 gzip 이나 brotli 로 보낸다면 이 비율은 과장입니다 — 공백은 압축이 가장 잘 되는 부분이라 실제로 오가는 차이는 몇 퍼센트 안쪽입니다.
자주 묻는 질문
#ffffff를 #fff로 줄여 주나요?
하지 않습니다. 이런 최적화는 얻는 것이 몇 바이트인데 잘못 건드리면 화면이 깨집니다. 공백·줄바꿈·마지막 세미콜론·주석까지만 걷어냅니다.
라이선스 주석은 남나요?
남습니다. /*! 로 시작하는 주석은 지우지 않습니다. 나머지 주석은 줄이기에서 없앱니다.
주석은 지워지나요?
줄이기를 하면 /* … */ 주석은 없어지지만, /*! 로 시작하는 주석은 남깁니다. 라이선스 표시처럼 남겨야 하는 주석이 있다면 첫 글자를 /*! 로 두세요 — 줄인 뒤에 다시 붙일 일이 없습니다.
얼마나 줄어드나요?
손으로 쓴 CSS 는 공백과 줄바꿈이 3할 안팎을 차지해 대개 그만큼 줄어듭니다. 다만 서버가 gzip 으로 보내면 공백은 어차피 잘 눌리기 때문에, 실제로 오가는 크기의 차이는 그보다 훨씬 작습니다.
펴기와 줄이기를 번갈아 하면 원래대로 돌아오나요?
글자 그대로 돌아오지는 않습니다. 원래 넣어 둔 빈 줄과 주석은 줄이는 순간 사라지고, 다시 펴면 규칙마다 한 줄씩인 기본 모양으로 나옵니다. 뜻은 같지만 생김새는 달라집니다.
@media 안의 규칙도 펴지나요?
펴집니다. 중괄호 깊이만 보므로 @media 블록은 한 단, 그 안의 규칙은 두 단 들여쓰기로 나옵니다. @import·@charset 처럼 중괄호 없는 문장은 세미콜론에서 줄이 끝나 제 줄을 갖습니다.
SCSS 나 LESS 도 되나요?
중괄호와 세미콜론만 보고 나누므로 중첩된 규칙은 겉보기에는 펴집니다. 다만 // 한 줄 주석은 CSS 문법이 아니라 주석으로 알아보지 못합니다 — 줄이기에서 줄바꿈이 사라지면 뒤따르는 코드가 그 주석에 삼켜집니다. 전처리기 파일은 그쪽 도구로 다듬으세요.
붙여넣은 코드가 서버로 가나요?
가지 않습니다. 브라우저 안에서만 처리하고 어디에도 보내거나 저장하지 않습니다. 사내 설정 파일이나 운영 쿼리처럼 밖으로 내보내기 곤란한 것도 그래서 쓸 수 있습니다. 인터넷을 끊고도 동작합니다.