CSS 압축: 브라우저에서 바로 CSS minify
스타일시트를 붙여 넣으면 주석, 줄바꿈, 브라우저에 필요 없는 공백을 모두 지워 CSS 압축을 해 줘요. 압축된 CSS는 순식간에 아래에 나타나고, 몇 바이트를 줄였는지도 정확히 보여줘요. 설치도 빌드 과정도 필요 없고, 붙여 넣은 내용은 어디에도 업로드되지 않아요. 모든 처리는 온라인 상태의 브라우저 안에서 이뤄져요.
CSS minify online, 이렇게 사용하세요
- 원본 CSS 칸에 CSS를 붙여 넣거나 직접 입력하세요.
- 입력을 멈추고 잠시 지나면 압축된 CSS가 아래에 나타나요. 원래 크기, 줄어든 크기, 절약한 비율도 함께 보여요. 따로 누를 버튼은 없어요.
- 클립보드에 복사를 눌러 프로젝트에 붙여 넣거나, .min.css 다운로드로 파일로 저장하세요.
문법이 틀린 CSS를 넣어도 도구가 멈추지 않아요. 읽을 수 있는 데까지 압축되니까 덜 쓴 코드를 붙여 넣고 나중에 고쳐도 돼요.
CSS minifier가 지우는 것과 남기는 것
압축해도 모든 규칙은 전과 똑같이 동작해요. 사람이 읽기 위해 들어간 부분만 빠져요. 주석이 사라지고, 연속된 공백은 줄어들고, 중괄호·콜론·쉼표 앞뒤의 공백이 없어지며, 닫는 중괄호 바로 앞의 마지막 세미콜론도 지워져요. 따옴표로 감싼 문자열, url() 값, 이스케이프된 문자는 그대로 복사되기 때문에 "a b" 같은 내용은 공백이 유지돼요.
압축 전: /* Buttons */ .btn { color: #fff; margin: 0 auto; }
압축 후: .btn{color:#fff;margin:0 auto}
CSS 경량화로 용량이 얼마나 줄어드나요
파일에 들어 있는 주석과 공백의 양에 따라 달라요. 주석이 많고 들여쓰기가 깔끔한 스타일시트는 4분의 1에서 절반 정도 줄어드는 경우가 많아요. 결과 아래에서 원래 크기, 압축 후 크기, 정확한 절약 비율을 확인할 수 있어요.
파일이 작아지면 더 빨리 다운로드되고 페이지도 더 빨리 그려져요. 전송량을 더 줄이고 싶다면 웹 서버에서 압축한 파일을 gzip이나 Brotli로 보내는 방법도 있어요.
라이선스 주석을 남길지 지울지 정하기
/*!로 시작하는 주석에는 보통 라이브러리의 라이선스나 저작권 고지가 들어 있어요. 많은 라이선스가 이 고지를 코드와 함께 배포하도록 요구하기 때문에 기본으로 남겨 둬요.
입력 칸 아래의 라이선스 주석 유지 체크를 해제하면 이 주석까지 지워서 가장 작은 파일을 만들 수 있어요.
min.css 만들기와 실서비스 사용
.min.css 파일은 스타일시트를 압축한 사본이에요. 읽기 쉬운 원본 옆에 둘 수 있도록 관례적으로 이렇게 이름을 붙여요. 예를 들면 style.css와 style.min.css예요. 압축된 CSS는 브라우저가 스타일시트를 읽는 방식에 영향이 없는 문자만 빠졌기 때문에 실서비스에 그대로 써도 돼요. 원본 파일은 소스로 꼭 보관하세요.
자주 묻는 질문
CSS minify는 무엇을 하나요?
브라우저가 스타일을 읽는 데 필요 없는 것을 모두 지워요. 주석, 줄바꿈, 들여쓰기, 중괄호·콜론·쉼표 앞뒤의 공백, 각 규칙의 마지막 세미콜론이 대상이에요. 결과는 원본과 똑같이 동작하지만 더 작아서 더 빨리 다운로드돼요.
CSS 공백 제거도 되나요?
네, 브라우저에 필요 없는 공백과 줄바꿈은 모두 지워져요. 다만 따옴표로 감싼 문자열, url() 값, 이스케이프된 문자 안의 공백은 그대로 남아서 화면이 달라지지 않아요.
CSS에서 주석을 모두 지우려면 어떻게 하나요?
CSS를 붙여 넣고 ‘라이선스 주석 유지’ 체크를 해제하세요. /*!로 시작하는 주석까지 모든 주석이 지워져요. 체크를 그대로 두면 그 라이선스 고지만 남고 나머지 주석은 지워져요.
CSS 용량 줄이기, 압축만으로 충분한가요?
주석과 공백이 많은 파일이라면 압축만으로 4분의 1에서 절반 정도 줄어드는 경우가 많아요. 결과 아래의 비율로 내 파일이 얼마나 줄었는지 바로 확인할 수 있어요. 웹 서버에서 gzip이나 Brotli를 함께 쓰면 전송량이 더 줄어요.
압축한 CSS를 실서비스에 써도 안전한가요?
네, 안전해요. 브라우저가 스타일시트를 읽는 방식에 영향이 없는 문자만 지우고, 문자열, url() 값, 이스케이프된 문자는 쓴 그대로 복사해요. 원본 파일은 소스로 보관하고 .min.css 버전을 배포하세요.
CSS 압축 해제도 할 수 있나요?
원래 서식은 압축할 때 사라지기 때문에 똑같이 되돌릴 수는 없지만, 다시 읽기 쉽게 만들 수는 있어요. 압축된 코드를 코드 포맷터에 붙여 넣으면 들여쓰기를 다시 해 줘요. 지운 주석은 돌아오지 않으니 원본은 꼭 보관하세요.
.min.css 파일은 무엇인가요?
스타일시트를 압축한 사본이에요. 읽기 쉬운 원본 옆에 두도록 관례적으로 붙이는 이름이고, 예를 들면 style.css와 style.min.css예요. 편집은 원본에서 하고, 공개 사이트에는 .min.css를 연결하세요.
오류가 있는 CSS도 압축되나요?
네, 도구가 멈추지 않아요. 읽을 수 있는 데까지 압축되니까 덜 쓴 코드를 넣고 나중에 고쳐도 돼요.
