CSS 정리기(CSS·SCSS·LESS)
압축되거나 어지러운 CSS, SCSS, LESS를 정리합니다. 선언은 한 줄에 하나, 중첩 규칙은 들여쓰기, 선택자는 줄 분리, 색은 소문자, 속성 정렬도 선택할 수 있습니다.
압축된 스타일시트나 복사한 코드 조각은 읽기도, 고치기도 어렵습니다. 이 정리기는 구조를 다시 세웁니다. 선언은 한 줄에 하나, 중첩 블록은 한 단계 더 들여쓰기, 쉼표로 이은 선택자는 줄을 나누고, 자식·형제·인접 결합자 주위에는 공백을 넣습니다. SCSS와 LESS의 중첩, & 부모 선택자, #{} 보간, // 주석을 이해하며 문자열과 url()은 쓴 그대로 둡니다.
사용 방법
- CSS, SCSS 또는 LESS(압축되었거나 어지러운 코드)를 붙여 넣습니다.
- 공백 2칸, 공백 4칸, 탭 중에서 고릅니다.
- 규칙 사이의 빈 줄을 둘지 정합니다.
- 원하면 16진수 색을 소문자로 바꾸거나 속성을 알파벳순으로 정렬합니다.
- 정리된 코드를 복사합니다.
계산식
선택자, 선택자 { 속성: 값; } → 선택자는 한 줄에 하나, 선언도 한 줄에 하나, 중첩 단계마다 들여쓰기 한 번
텍스트를 토큰으로 나누므로 따옴표, 주석, url(), #{} 안의 중괄호, 콜론, 세미콜론은 구조로 취급하지 않습니다. 값은 공백 하나로 정리하고, 쉼표 뒤와 !important 앞에 공백을 둡니다. 블록의 마지막 선언에는 빠진 세미콜론을 붙입니다. 중괄호 짝이 맞지 않으면 깨진 결과를 내는 대신 줄과 열 번호를 알려 줍니다.
예시
예제 .card,.card--wide{padding:16px 24px;border:1px solid #DDD;…}는 .card,와 .card--wide { 두 줄이 되고, 그 뒤에 border: 1px solid #ddd;, box-shadow: 0 1px 2px rgba(0, 0, 0, .08); 같은 선언 네 개가 들여쓰기되어 따라옵니다. 미디어 쿼리는 @media (max-width: 600px) {가 되고 두 규칙이 안쪽에 들여쓰기됩니다. 도구는 모두 규칙 5개(미디어 쿼리 포함)와 선언 8개로 집계합니다.
자주 묻는 질문
정리하면 CSS의 동작이 달라지나요?
아닙니다. 공백, 마지막 세미콜론, (선택하면) 16진수 색의 대소문자만 바뀝니다. margin 같은 단축 속성과 margin-top 같은 개별 속성이 한 규칙에 함께 있으면 순서가 우선순위를 정하므로 속성 정렬이 문제가 될 수 있어, 그런 규칙은 원래 순서를 유지합니다. 한 가지 예외로, 값에 중괄호({ })가 있는 사용자 지정 속성은 중첩 블록처럼 배치되어 안쪽에 세미콜론이 붙으니, 정리한 뒤 그런 값을 확인하세요.
SCSS와 LESS도 정리할 수 있나요?
레이아웃은 가능합니다. 중첩 규칙, 믹스인, @include, 변수, 보간은 CSS처럼 들여쓰기됩니다. 컴파일하지는 않으므로 변수와 믹스인은 쓴 그대로 남습니다.
주석이 별도의 줄로 옮겨지는 이유는 무엇인가요?
규칙이나 선언 사이의 주석은 자기 줄에 둡니다. 값 안의 주석은 제자리에 남습니다.
내 코드가 업로드되나요?
아닙니다. 정리는 브라우저에서 이뤄집니다.
최종 업데이트:
이 입력값이 담긴 페이지 주소: https://kakao.mobile/ko/tools/css-beautifier/
인용·퍼가기
kakaoCalc. (2026, November 8). CSS 정리기(CSS·SCSS·LESS). https://kakao.mobile/ko/tools/css-beautifier/
“CSS 정리기(CSS·SCSS·LESS).” kakaoCalc, 8 Nov. 2026, kakao.mobile/ko/tools/css-beautifier/.