CSS 포맷터

CSS 코드를 포맷, 압축, 정리하세요

정리 옵션

사용 방법

정리 모드

  1. "CSS 정리" 모드를 선택하세요
  2. 압축되거나 포맷되지 않은 CSS 코드를 붙여넣으세요
  3. 포맷 설정을 선택하세요
  4. "CSS 포맷" 버튼을 클릭하여 코드를 정리하세요
  5. 포맷된 결과를 복사하세요

압축 모드

  1. "CSS 압축" 모드를 선택하세요
  2. CSS 코드를 붙여넣으세요
  3. 최적화 옵션을 선택하세요
  4. "CSS 포맷" 버튼을 클릭하여 코드를 압축하세요
  5. 프로덕션용으로 압축된 결과를 복사하세요

기능

  • 정리: 가독성을 위해 CSS 포맷
  • 압축: 프로덕션용 CSS 압축
  • 사용자 정의 옵션: 들여쓰기, 간격, 최적화 설정 선택
  • 통계: 파일 크기 변화와 압축 비율 확인
  • 색상 최적화: 색상을 더 짧은 형식으로 변환
  • 주석 처리: 필요에 따라 주석 유지 또는 제거

CSS 최적화 팁

  • 프로덕션: 파일 크기 감소를 위해 항상 프로덕션용 CSS를 압축하세요
  • 개발: 쉬운 디버깅과 유지보수를 위해 정리된 CSS를 사용하세요
  • 색상: 더 짧은 색상 형식 사용 (#ffffff 대신 #fff)
  • 속성: 더 나은 구성을 위해 관련 속성들을 그룹화하세요
  • 주석: 프로덕션에서는 주석을 제거하되 개발에서는 유지하세요
  • 벤더 접두사: 대상 브라우저에 불필요한 벤더 접두사를 제거하세요

일반적인 CSS 패턴

이전 (압축됨)

.btn{padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.btn:hover{background:#0056b3}

이후 (정리됨)

.btn {
    padding: 10px 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    background: #0056b3;
}