CSS 코드 정리기 / 포맷터
CSS 포맷터와 CSS 정리기를 하나로 합쳤습니다. CSS를 붙여넣으면 코드 정리로 읽기 좋게 펼치고, CSS 압축으로 불필요한 공백과 주석을 줄입니다. 별도 업로드 없이 브라우저에서 바로 복사하거나 다운로드할 수 있습니다.
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
CSS 포맷터는 읽기 좋은 코드와 배포용 압축을 오가게 해 줍니다
CSS는 같은 결과를 내더라도 사람이 읽기 좋은 모양과 배포하기 좋은 모양이 다릅니다. 여러 줄로 정리된 스타일시트는 선택자와 속성을 검토하기 쉽고, 압축된 CSS는 파일 크기를 줄여 배포본에 넣기 좋습니다. 이 화면은 그 두 방향을 한 에디터 안에 둔 CSS 포맷터입니다.
코드 정리는 중괄호, 세미콜론, 쉼표를 기준으로 줄을 나누고 선택한 Space/Size 값으로 들여쓰기를 맞춥니다. CSS 압축은 일반 주석과 반복 공백을 줄여 한 줄에 가까운 결과를 만듭니다. 속성 순서를 바꾸거나 cascade 판단을 대신하지는 않기 때문에, 정리 후에도 실제 화면에서 마지막 확인은 필요합니다.
CSS 코드 정리가 실제로 바꾸는 부분
압축된 .button{color:#fff;margin:0} 같은 코드는 선택자, 선언, 닫는 중괄호가 한눈에 들어오지 않습니다. 코드 정리를 누르면 괄호 뒤와 세미콜론 뒤에 줄바꿈을 만들고, 선택한 들여쓰기 크기를 적용해 규칙 단위를 보기 쉽게 나눕니다. 속성명이나 값 자체는 고치지 않고, 작성된 순서도 그대로 둡니다.
CSS 압축은 무엇을 줄이나
CSS 압축은 배포용 사본을 만들 때 쓰는 반대 방향입니다. 일반 주석, 줄바꿈, 반복 공백, :와 {} 주변의 불필요한 여백을 줄이고, 닫는 중괄호 앞 세미콜론도 제거합니다. 반복된 HEX 색상(#ffffff → #fff)과 0px 같은 0 단위는 보수적으로 짧게 만듭니다.
언제 코드 정리를 먼저 쓰면 좋은가
외부에서 받은 스타일시트, 오래된 프로젝트 CSS, CMS에 붙어 있던 인라인 CSS를 읽어야 할 때는 먼저 정리하는 편이 낫습니다. 선택자가 어디서 끝나는지, 미디어 쿼리 안에 어떤 규칙이 들어 있는지, 같은 속성이 반복되는지 눈으로 확인하기 쉬워집니다.
언제 CSS 압축을 쓰면 좋은가
수정과 검토가 끝난 뒤 배포본에 넣을 사본을 만들 때 CSS 압축을 씁니다. 압축본은 읽기는 불편하지만 전송할 글자 수가 줄어듭니다. 원본 편집용 CSS는 따로 보관하고, 압축 결과는 복사하거나 다운로드해 배포 단계에서 쓰는 흐름이 안전합니다.
예시로 보면 차이가 분명합니다
한 줄에 붙은 .card{margin:0px;padding:16px;color:#ffffff}는 코드 정리 후 속성별로 줄이 갈라집니다. 반대로 CSS 압축을 누르면 같은 내용을 .card{margin:0;padding:16px;color:#fff}처럼 짧게 만듭니다. 두 결과는 목적이 다를 뿐, 같은 CSS를 다루는 한 흐름입니다.
검색어가 달라도 찾는 작업은 비슷합니다
CSS 포맷터, CSS 정리기, CSS beautifier, CSS code formatter는 대체로 “읽기 좋게 펼치기”를 뜻합니다. CSS minifier, CSS 압축기는 “불필요한 글자를 줄이기”에 가깝습니다. 그래서 이 페이지는 정리와 압축을 나누지 않고 같은 작업면에 둡니다.
이 도구가 판단하지 않는 것
이 화면은 빠른 정리와 압축을 위한 도구입니다. 지원하지 않는 CSS 속성을 찾아내거나, 브라우저 호환성을 판정하거나, 팀 규칙을 강제하지 않습니다. SCSS, Less, CSS-in-JS처럼 표준 CSS 밖의 문법은 전용 빌드 도구나 Stylelint 같은 검증기와 함께 확인하는 편이 좋습니다.
FAQ
입력한 CSS가 서버로 전송되나요?
아니요. 코드 정리와 CSS 압축은 현재 브라우저 안에서 처리됩니다. 복사하거나 다운로드하기 전까지 입력한 코드는 현재 화면 안에서만 다룹니다.
CSS 포맷터와 CSS beautifier는 같은 말인가요?
이 페이지에서는 같은 작업으로 봅니다. 둘 다 흐트러진 CSS를 줄바꿈과 들여쓰기가 있는 읽기 좋은 코드로 바꾸는 기능을 가리킵니다.
CSS minifier와 CSS 압축기는 무엇을 하나요?
둘 다 배포용으로 CSS의 글자 수를 줄이는 기능입니다. 일반 주석, 반복 공백, 줄바꿈, 일부 불필요한 세미콜론을 줄이고 짧게 표현할 수 있는 색상과 0 단위를 정리합니다.
정리나 압축을 하면 CSS 동작이 바뀔 수 있나요?
속성 순서를 바꾸지 않도록 보수적으로 처리하지만, 입력 CSS가 깨져 있거나 표준 CSS가 아니면 결과를 그대로 믿으면 안 됩니다. 실제 화면에 반영하기 전에는 브라우저에서 한 번 확인하세요.
SCSS, Less, CSS-in-JS도 정리할 수 있나요?
표준 CSS를 기준으로 처리합니다. 변수, 중첩, mixin, 템플릿 문자열이 많은 코드는 전용 빌드 환경에서 다시 포맷하거나 검증하는 편이 안전합니다.