CSS 정렬 및 압축기
지저분한 CSS의 들여쓰기를 정리하여 가독성을 높이거나, 규칙 순서를 변경하지 않는 안전 모드로 코드를 압축하여 배포해 보세요.
CSS 정렬 및 압축은 브라우저 내에서 직접 처리됩니다. BroBroGo 서버로 어떠한 데이터도 전송되지 않습니다.
자주 묻는 질문
코드 정렬(Beautify)과 코드 압축(Minify)의 차이점은 무엇인가요?
'코드 정렬(Beautify)'은 들여쓰기와 공백을 정리하여 스타일을 읽고 편집하기 쉽게 만듭니다. 반면 '코드 압축(Minify)'은 브라우저에 필요하지 않은 공백과 주석을 제거하고 색상값 등을 단축하여 파일 크기를 줄이고 로딩 속도를 높입니다. 작업 중에는 정렬을 사용하고, 배포 전에는 압축을 사용하세요.
'안전(Safe)'과 '최적화(Optimized)' 압축 설정은 각각 무엇을 하나요?
'안전(Safe)' 모드는 공백과 주석만 제거하고 값을 단축하며, 작성한 모든 규칙의 위치를 그대로 유지합니다. '최적화(Optimized)' 모드는 한 단계 더 나아가 중복된 선택자와 규칙을 병합하여 파일 크기를 더욱 줄입니다. 이 과정에서 규칙의 순서가 바뀔 수 있으므로, 소스 코드 순서에 의존하는 스타일시트라면 배포 전에 가볍게 검토하는 것이 좋습니다. /*! … */ 형식으로 표시된 주석은 두 모드 모두에서 유지됩니다.
코드를 압축하면 페이지가 다르게 보일 수 있나요?
'안전(Safe)' 모드에서는 스타일이 완전히 동일하게 렌더링되므로 안심하셔도 됩니다. 공백을 축소하고 일반 주석을 제거하며, 값을 더 짧은 동등한 형태(예: #ffffff를 #fff로)로 다시 작성할 뿐, 벤더 프리픽스나 최신 구문은 전혀 변경하지 않습니다. '최적화(Optimized)' 모드는 규칙 병합도 수행하므로 대부분의 스타일시트에서 동일하게 보이지만, 규칙 순서가 중요한 경우에는 확인이 필요할 수 있습니다.