온라인 CSS 코드 정렬
압축된 스타일시트를 넣고 다시 편하게 읽어 보세요. 선택자와 선언을 줄별로 나누고 블록과 미디어 쿼리에 직접 작성한 것처럼 들여쓰기를 적용합니다.
배포용 CSS가 긴 한 줄인 이유
배포용 스타일시트는 브라우저로 보내는 텍스트 양을 줄이기 위해 압축되는 경우가 많습니다. 빌드 도구는 공백과 주석을 제거하고 값을 줄이거나 호환되는 규칙을 합칠 수 있습니다. 결과는 최적화 도구와 설정에 따라 달라지며, 특정한 크기 감소율이나 페이지 로딩 속도 향상을 보장하지 않습니다. 컴파일된 유틸리티 스타일시트에는 작은 규칙이 매우 많아 압축 파일을 훑어보기 어렵습니다. 정렬은 규칙을 읽기 위한 일관된 서식을 추가하지만, 이를 생성한 원본 컴포넌트, 전처리기 파일, 빌드 설정을 다시 만들지는 못합니다.
캐스케이드를 다시 읽기 쉽게
스타일시트를 정렬하는 가장 큰 이유는 어떤 규칙이 적용되거나 적용되지 않는 이유를 이해하기 위해서입니다. 선택자마다 줄을 나누고 그 아래 선언을 들여쓰면 캐스케이드를 제대로 따라갈 수 있습니다. 요소를 대상으로 하는 모든 규칙을 찾고, 명시도를 비교하고, 나중에 나오는 규칙을 확인하고, 작업을 덮어쓰던 important 선언을 발견할 수 있습니다. 미디어 쿼리와 그 내용도 블록으로 드러나므로 압축된 파일보다 반응형 동작을 추적하기 쉽습니다. 특정 문제를 조사할 때는 수정 전에 완전한 규칙과 관련 미디어 쿼리를 함께 복사하세요. 해당 스타일시트는 캐스케이드의 일부만 설명합니다. 인라인 스타일, 다른 스타일시트, 상속, 현재 DOM도 중요합니다. 브라우저 개발자 도구는 요소에 실제로 적용되는 선언을 보여 줍니다. 정렬된 파일에서 선언의 맥락을 이해한 뒤 조사 중인 뷰포트 크기에서 동작을 확인하세요. 자동 감지가 CSS를 JavaScript로 판단할 수 있으므로 결과를 신뢰하기 전에 표시된 형식을 확인하세요.
최신 CSS 지원
포매터는 오래된 일부 문법뿐 아니라 최신 CSS도 이해합니다. 사용자 지정 속성, calc와 clamp 표현식, grid와 flexbox 단축 속성, 컨테이너 쿼리, 중첩 규칙, 레이어, supports 블록, 키프레임 등을 정렬할 수 있습니다. 긴 선택자 목록은 여러 줄로 나뉘어 읽기 쉬워지고 빌드 후 남아 있는 주석은 유지됩니다. 일반 CSS에 브라우저 공급업체 접두사가 붙은 속성이 섞여 있어도 해당 선언을 유지하면서 포매터의 서식을 적용합니다.
컴파일된 프레임워크 CSS를 읽는 요령
컴파일된 Tailwind나 Bootstrap 스타일시트를 정렬하면 파일이 빠르게 길어지며 수만 줄에 이르는 일도 흔합니다. 줄 번호를 켠 뒤 스크롤하는 대신 브라우저 검색으로 필요한 클래스명이나 속성을 찾으세요. 목적이 코드 읽기가 아니라 파일 크기 축소라면 빌드 설정을 살펴보는 것이 중요합니다. 사용하지 않는 규칙은 압축이 실행되기 전부터 이미 생성되어 있기 때문입니다.
자주 묻는 질문
컴파일된 Tailwind 스타일시트도 정렬할 수 있나요?
네. 이 페이지의 대표적인 활용 사례입니다. 프레임워크가 유틸리티 클래스마다 규칙을 생성하므로 결과가 매우 길 수 있습니다. 줄 번호를 켜고 브라우저 검색을 활용하면 효율적으로 탐색할 수 있습니다.
주석도 복구되나요?
입력한 CSS에 남아 있는 주석은 정렬 결과에도 표시될 수 있습니다. 규칙을 만든 이유에 대한 설명을 포함해 압축 도구가 제거한 주석은 해당 파일에서 복구할 수 없습니다. 설계 메모, 작성자의 설명, 선택자가 추가된 배경이 필요하다면 원본 소스 저장소를 확인하세요.
SCSS나 Less에도 사용할 수 있나요?
이 페이지는 Sass나 Less의 컴파일 결과를 포함한 일반 CSS용입니다. 전처리기 전용 변수, 믹스인, 지시문은 지원하는 입력이 아닙니다. 프로젝트에 맞는 도구로 소스를 먼저 컴파일한 다음 결과 스타일시트를 살펴볼 때 이 편집기를 사용하세요.