CSS 뷰티파이어

CSS 뷰티파이어는 압축되거나 난독화되거나 들여쓰기가 일관되지 않은 스타일시트를 깔끔하고 읽기 쉬운 CSS로 다시 포맷합니다 — 일관된 들여쓰기, 정렬된 속성, 규칙 사이의 명확한 간격으로 실제로 읽고 검토하고 편집할 수 있게 해줍니다. 압축된 스타일시트, 번들 CSS 파일, 또는 지저분한 수작업 CSS를 붙여넣으면 즉시 포맷된 결과를 얻을 수 있습니다.

• •들여쓰기: 공백 2칸, 4칸, 또는 탭을 실제 js-beautify 포맷 엔진을 통해 적용
• •속성 정렬: 각 규칙 블록 내에서 선언을 알파벳순으로 정렬하여 일관되고 훑어보기 쉬운 스타일을 만듦
• •미디어 쿼리 정렬: 최상위 @media 블록을 breakpoint 기준으로 정렬, min-width는 오름차순, max-width는 내림차순
• •규칙 간격: 규칙 사이에 빈 줄을 추가하여 시각적으로 구분하거나, 출력을 조밀하게 유지
• •주석 보존: 포맷 중 /* ... */ 주석을 유지하거나 제거
• •색상 정규화: 채널이 허용하는 경우 6자리 16진수 색상과 rgb() 값을 3자리 16진수 축약형으로 단축

• •브라우저 개발자 도구에서 레이아웃 문제를 디버깅하기 위해 압축된 프로덕션 스타일시트 읽기
• •채팅 메시지, PDF, 이메일에서 붙여넣어 원래 들여쓰기를 잃은 CSS 재포맷
• •코드 리뷰 전에 속성 순서와 들여쓰기 표준화
• •CSS-in-JS 빌드나 전처리기 출력에서 생성된 번들 스타일시트를 감사할 수 있을 만큼 읽기 쉽게 만들기
• •커밋하기 전에 디자인 도구에서 내보낸 CSS 정리하기

1. 1.CSS를 입력 편집기에 붙여넣거나 .css 파일을 업로드하세요
2. 2.들여쓰기(공백 2/4칸 또는 탭)를 선택하세요
3. 3.필요에 따라 주석 보존, 속성 정렬, 미디어 쿼리 정렬, 규칙 간격, 색상 정규화를 켜세요
4. 4.입력하는 대로 포맷된 결과가 자동으로 나타납니다
5. 5.결과를 복사하거나 .css 파일로 다운로드하세요

• •속성을 알파벳순으로 정렬하면 margin과 margin-top처럼 논리적으로 관련된 선언이 분리될 수 있습니다 — 엄격한 스타일 규칙으로 채택하기 전에 정렬된 결과를 검토하세요
• •벤더 프리픽스가 붙은 속성(-webkit-, -moz-)은 프리픽스가 없는 대응 속성과 함께 정렬되어, 프리픽스가 붙은 폴백이 표준 속성 뒤에 위치할 수 있습니다
• •중괄호 검사기는 입력하는 동안 일치하지 않는 { 와 } 를 표시하지만, 이는 완전한 CSS 파서가 아닌 휴리스틱 스캔입니다 — 모든 종류의 잘못된 구문을 잡아낼 수는 없습니다

• •이것은 포맷팅 도구이지 린터가 아닙니다 — 잘못된 속성 이름, 브라우저 호환성 문제, 선택자 우선순위 충돌은 잡아내지 못합니다
• •매우 큰 스타일시트(수 MB의 번들)는 브라우저에서 정리하는 데 느릴 수 있습니다 — 대규모 코드베이스 포맷팅에는 빌드 도구에 통합된 포맷터(Prettier, Stylelint --fix)가 더 적합합니다
• •팀 전체에서 일관된 CSS 스타일을 강제하려면, 에디터/CI에 통합된 Stylelint나 Prettier 같은 전용 도구가 임시방편적인 브라우저 포맷팅보다 더 적합합니다

읽기 쉬운 CSS가 있고 프로덕션을 위해 파일 크기와 페이지 로드 시간을 줄여야 한다면, 대신 CSS 압축기를 사용하세요. 공백을 축소하고 색상을 단축하며, 최대 압축을 위해 불필요한 0을 제거할 수도 있습니다.