CSS 포매터

minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.

카테고리: 개발자 도구

언제 사용하나요?

minify된 CSS를 펼쳐 선택자와 속성을 확인하거나, 코드 리뷰 전 CSS를 일관된 형식으로 정리해야 할 때 사용합니다.

사용 방법

CSS 코드를 입력란에 붙여넣습니다.
포맷 버튼을 누르면 선택자와 속성 단위로 정렬됩니다.
정리된 CSS를 복사합니다.

입력값 안내

한 줄로 압축되어 있거나 정렬이 맞지 않는 CSS 코드를 붙여넣습니다.

계산·변환 기준

CSS 텍스트를 파싱하여 선택자(Selector) 선언문과 중괄호 `{}` 내부에 있는 속성(Property)-값(Value) 쌍을 분리하고, 각 속성별로 줄바꿈 및 표준 들여쓰기(Indent)를 일괄 적용하여 가독성 높은 형태로 재작성합니다.

사용 예시

minify CSS 디버깅 - 배포 후 압축된 CSS 파일을 펼쳐 선택자와 속성을 빠르게 확인하고 버그 원인을 찾습니다.
스타일 코드 리뷰 - 들여쓰기가 일관되지 않은 CSS를 정렬해 리뷰어가 변경 사항을 파악하기 쉽게 만듭니다.
외부 스타일 분석 - 크롬 개발자 도구에서 복사한 압축 CSS나 CDN 스타일시트를 펼쳐 적용된 규칙을 분석합니다.

예시

".box{color:red;margin:0;}" → 선택자와 속성이 여러 줄로 나뉜 구조화된 CSS 포맷으로 반환
한 줄로 압축된 CSS → 규칙과 속성별로 줄을 나눈 읽기 좋은 코드로 변환
배포용 minify CSS 파일 전체 붙여넣기 → 선택자·속성 줄 분리 후 버그 원인 탐지
@media 쿼리 포함 압축 CSS → 미디어 블록 단위로 들여쓰기 정렬
외부 라이브러리 CDN CSS → 펼쳐서 원하는 클래스 선택자 즉시 검색
크롬 DevTools에서 복사한 인라인 스타일 → 정렬 후 별도 클래스로 추출 준비

주의사항

포매팅은 코드의 시각적 정렬만 수행하며 CSS 문법 오류는 수정되지 않습니다. 실제 CSS 유효성 검사는 W3C CSS Validator를 이용하세요.
SCSS·Less·Stylus 등 CSS 전처리기 문법은 포맷 결과가 다를 수 있습니다. 표준 CSS 코드에 사용하세요.

계산·사용 가이드

CSS 포매팅

CSS 규칙을 정렬해 속성과 값을 읽기 쉽게 만듭니다. 선택자, 속성 순서, 들여쓰기를 통일해 코드 품질을 높일 수 있습니다.

CSS 압축

불필요한 공백, 주석을 제거해 CSS 파일 크기를 줄입니다. 배포 전 압축된 CSS를 사용하면 페이지 로딩 속도가 개선됩니다.

자주 묻는 질문

at-rule(@media, @keyframes 등)도 지원하나요?

@media, @supports, @keyframes, @import 같은 일반 CSS at-rule 문법을 포매팅합니다. 미디어 쿼리 블록도 중첩 들여쓰기로 정리됩니다.

붙여넣은 CSS가 외부로 전송되나요?

아니요. CSS 정리는 브라우저 안에서만 이뤄지며 코드가 외부 서버로 전송되거나 저장되지 않습니다. 내부 스타일 코드도 안심하고 사용할 수 있습니다.

들여쓰기는 어떤 기준인가요?

Prettier 표준 규칙에 따라 2칸 들여쓰기로 규칙과 속성을 정리합니다. 각 선택자의 중괄호 안에 있는 속성들이 한 줄씩 나뉘어 정렬됩니다.

압축된 CSS도 펼칠 수 있나요?

네, 한 줄로 압축된 minify CSS도 규칙과 속성 단위로 줄을 나눠 보기 좋게 정리합니다. 배포 후 디버깅을 위해 압축된 CSS를 읽어야 할 때 유용합니다.

SCSS나 Less도 처리할 수 있나요?

이 포매터는 표준 CSS를 기준으로 처리합니다. SCSS의 중첩 규칙(&:hover, & .child 등)이나 변수($color: red) 같은 전처리기 전용 문법은 결과가 예상과 다를 수 있으니, SCSS/Less 전용 포매터 사용을 권장합니다.