CSS 포매터
압축된 CSS 코드를 읽기 좋게 정렬합니다
📖 문자 단위 CSS 포매터의 중첩 깊이 추적 방식 가이드 보기
CSS 포매터
이 도구는 CSS를 문자 단위로 순회하며 {, }, ;, , 같은 구조 문자를 만날 때마다 줄바꿈과 들여쓰기 깊이를 갱신하는 방식으로 압축된 CSS를 재구성합니다. 여는 중괄호를 만나면 들여쓰기 깊이를 한 단계 늘리고, 닫는 중괄호에서는 한 단계 줄이는 식으로 중첩 구조(미디어 쿼리 안의 선택자 등)까지 정확히 반영합니다. CSS 압축기(minifier)로 한 줄이 되어버린 코드를 다시 읽을 수 있는 형태로 되돌리거나, 다른 사람이 짠 압축된 스타일시트를 분석·수정하기 전에 구조를 파악하는 용도로 활용됩니다.
자주 묻는 질문
CSS 포매터란?
문자 단위로 CSS를 파싱하면서 여는 중괄호에서 들여쓰기를 늘리고, 세미콜론과 닫는 중괄호마다 줄바꿈을 삽입해, 한 줄로 압축된 CSS를 원래의 계층 구조가 보이는 형태로 재구성하는 도구입니다.
미디어 쿼리도 포맷되나요?
네. @media 블록도 여는 중괄호를 만나면 depth가 1 증가하므로, 그 안에 든 선택자와 속성이 자동으로 한 단계 더 들여쓰기되어 중첩 관계가 시각적으로 드러납니다.
속성 정렬이란?
각 { } 블록 안의 선언들을 줄 단위로 분리한 뒤 문자열 비교로 알파벳순 정렬합니다. background, color, display처럼 알파벳 순서로 나열되어 있으면 특정 속성이 있는지 눈으로 빠르게 찾기 쉬워집니다.
SCSS도 포맷 가능한가요?
지원하지 않습니다. 이 도구는 { } ; , 같은 순수 CSS 구조 문자만 인식하도록 만들어져 있어, SCSS의 중첩 선택자나 $variable, @if 같은 전처리기 전용 문법을 넣으면 구조가 깨질 수 있습니다.
Prettier와 차이는?
이 도구는 문자 단위로 중괄호·세미콜론 위치만 보고 줄바꿈을 넣는 단순한 방식이라 빠르지만, 값 안의 주석 처리나 복잡한 선택자 조합 같은 예외 상황까지 완벽하게 처리하지는 못합니다. 실제 프로젝트의 코드 스타일 통일에는 CSS 문법을 완전히 파싱하는 Prettier 같은 도구를 권장합니다.
CSS 변수도 포맷되나요?
네. --primary-color: #fbbf24;처럼 커스텀 프로퍼티도 콜론과 세미콜론을 가진 일반 선언과 똑같은 구조이므로 다른 속성과 동일한 규칙으로 줄바꿈·들여쓰기가 적용됩니다.
@keyframes도 지원하나요?
네. @keyframes spin{ 0%{...} 100%{...} }처럼 중괄호가 두 겹으로 중첩된 구조도, 여는 중괄호마다 depth를 늘리는 방식이 그대로 적용되어 0%와 100% 블록이 한 단계 더 들여쓰기되어 표시됩니다.
선택자에 쉼표가 있으면?
'선택자별 줄바꿈' 옵션을 켜면 depth가 0인 최상위 레벨(즉 선택자 목록)에서만 쉼표 뒤에 줄바꿈을 넣어, h1, h2, h3{...}처럼 나열된 선택자를 각각 한 줄씩 분리해줍니다. 옵션을 끄면 쉼표 뒤에 공백만 추가됩니다.