사용 방법

붙여넣기, 실행, 확인, 복사 — 네 단계. 모든 작업은 브라우저에서 이뤄집니다.

CSS, HTML, JSON 등을 편집기에 넣으세요. 업로드되지 않습니다.

변환 또는 실행을 누르세요. 결과가 바로 나타납니다.

생성된 코드와 노트를 사용 전에 확인하세요.

결과를 복사해 프로젝트에 붙여넣으세요.

이 도구 소개

뷰티파이어는 포매터와 같은 계열의 도구로, 중괄호와 공백을 일정하게 맞춰 선택자를 빠르게 훑을 수 있게 합니다. CI에 넣는 포매터를 대체하지는 않습니다.

예시는 일부러 빽빽하게 작성한 내비게이션 CSS입니다.

입력

nav{display:flex;gap:1rem}nav a{color:#0f172a;text-decoration:none}nav a:hover{color:#0284c7}

출력

nav {
  display: flex;
  gap: 1rem;
}

CI에서 포매터 두 개가 충돌한다면 하나만 남기고, 이 도구는 수동 정리에 쓰는 편이 좋습니다.